Home/ Questions/Q 8070431
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T13:23:57+00:00

I have a div box and whenever I move over, a tooltip will appear

  • 0

I have a div box and whenever I move over, a tooltip will appear with its corresponding coordinates. What I want is, if I keep on moving inside the div, my tooltip will not be shown, but if I stopped moving then my tooltip will appear. By the way, I am obliged to use mouseover event in jquery because I need to extract the coordinates whenever I move the mouse.

Please help! And please provide me example as well. And as much as possible I don’t want to use plugins.

Thanks!

My progress so far:

<html>
<head>
    <style>
        #box {
            border: 1px solid black;
            width: 900px;
            height: 450px;
            margin: 0 auto;
            margin-top: 50px;
        }

        #tooltip{
            margin:8px;
            padding:8px;
            border:1px solid blue;
            background-color:yellow;
            position: absolute;
            z-index: 2;
            display: none;
        }
    </style>

    <script type="text/javascript" src='/libs/jquery/jquery.js'></script>
    <script>
        $(document).ready( function() {
            var offsetX = 20;
            var offsetY = 10;

            $('#box').mouseover(function(e) {
                var href = $(this).attr('href');
                $('<div id="tooltip"><input type="text" id="coor"/>    </div>').appendTo('body');
            });

            $('#box').mouseout(function(e) {
                $('#tooltip').remove();
            });

            $('#box').mouseenter( function() {
                // alert('entered');
            });

            var x = 0;

            $('#box').mousemove(function(e) {
                $('#tooltip').fadeOut('fast');

                var doIt = function() {
                    $('#tooltip').fadeIn(500);
                }

                setTimeout(doIt, 2500);

                $('#tooltip')
                    .css('top', e.pageY + offsetY)
                    .css('left', e.pageX + offsetX);
                $('#coor').val(e.pageX + '' + e.pageY);
            });
        });
    </script>
</head>

<body>
    <div id="box">

    </div>
    action: <input type="text" id="action" />
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think this is what you are after:

    $('.box')[0].onmousemove = (function() {
    var onmousestop = function() {
       $('.box').css('background-color', 'red');
    }, thread;

    return function() {
       $('.box').css('background-color', 'black');
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

    After a delays of 1500ms it will make the box go red, as soon as the user moves the mouse again the box will turn red, just substitute for your own actions.

    jQuery:

    var onmousestop = function (){
    $('.box').css('background-color', 'red');
}, thread;
$('.box').on('mouseenter',function (){
    onmousestop();
}).on('mousemove',function (){
    $('.box').css('background-color', 'black');
    thread&&clearTimeout(thread);
    thread = setTimeout(onmousestop, 3000);
});

    Demo

    • 0