Question

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.

Answer 1

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