Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery using mouse coordinates to offset 'tooltip' style hover function

I am trying to create a small div which appears when a particular element is hovered over. I also want to offset the position of the div using mouse co-ordinates that change as the client moves the mouse.

My guess is that to calculate this and return the new values for the div is expensive and draining resources seeing as the div's movement staggers.

Does anyone know how to make this method more efficient?

I have used the tooltip plugin which has a nice tracking feature, and moves the element really smoothly.

My js;

 $(document).ready(function(){
        $('#utilities').mouseover(function(event) { 
            var left = event.pageX - $(this).offset().left + 100;
            var top = event.pageY - $(this).offset().top + 130;
            $('#gas-electric-hover').css({top: top,left: left}).show();
            //console.log (left, top);
        });
        $('#utilities').mouseout(function() {
            $('#gas-electric-hover').hide();
        });
    });

I've also created this jsfiddle. In fact locally this code is staggering but the jsfiddle only appears to be updating the coords as the mouse enters and leaves the target div.

Any help greatly appreciated.

like image 764
lharby Avatar asked Sep 20 '12 09:09

lharby


Video Answer


1 Answers

I think you want mousemove like

 $(document).ready(function(){
    $('#utilities').mousemove(function(event) { 
        var left = event.pageX - $(this).offset().left + 100;
        var top = event.pageY - $(this).offset().top + 130;
        $('#gas-electric-hover').css({top: top,left: left}).show();
        //console.log (left, top);
    });
    $('#utilities').mouseout(function() {
        $('#gas-electric-hover').hide();
    });
});

Check this updated jsFiddle

like image 159
Yograj Gupta Avatar answered Oct 12 '22 02:10

Yograj Gupta