Bewildered Bewildered - 2 months ago 7
HTML Question

Any way to get a text area to follow mouse?

My first website is working ok, but I have an idea I don't know how to accomplish. Some pages have a video player that has buttons to select videos. When the mouse hovers over a button, the navigation menu is replaced with a popup text area that describes the video.
http://www.churchprojectionist.com/nt_history.html

I would like the popup text to appear a few lines above the button over which the mouse hovers, so the viewer's eyes don't have to move back and forth. I've looked, but haven't been found anything to indicate how to do this. The closest thing I've seen is using a

<span>
title property to create a mouseover tool tip. Perhaps you can point me in the right direction?

Answer

Try this :

$(document).on("mousemove",function(e){

    $(".moveTxt").css({top:e.pageY,left:e.pageX});

})

Final code :

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .moveTxt {
            position: relative;
            background-color: yellow;
            display: inline-block;
            border: 1px solid red;
        }
    </style>
</head>
    
    <body>
        
        <div class="moveTxt">Text</div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
        $(document).on("mousemove",function(e){

            $(".moveTxt").css({top:e.pageY,left:e.pageX});

        })
        
        </script>
    </body>
</html>

Comments