Jquery Ajax Mouseover Event Firing After Mouseout

I'm creating a tooltip using jQuery that gets the tooltip contents via Ajax request and then stores it in a variable so Ajax isn't constantly fired off every time they mouseover. I

Solution 1:

The hoverIntent plug-in allows you to avoid accidental mouseovers.

Add code to see if the mouseout has fired. If it did, than do not run the show() portion.

Solution 2:

Not sure why you need tool-tip from server. You can use jQuery Tooltip to achieve same stuff Demo Page

Hope this help

Solution 3:

I think you should check in your success handle to see if you should show the tooltip when mouse is already out.

Solution 4:

That's happening because the ajax request is not finished yet when the mouse has already left the node. It will just do its thing, wait for a response from the server, and then show the tooltip as defined in your success function.

One way to combat this would be to have an variable, say isHovering, which contains the node that is currently being hovered over. You could use the node's id for this: add it to the var immediately upon hover (before firing the ajax function), and set the var back to false upon mouseout.

Then, in your ajax function, before rendering anything, check the var and only render if it contains the correct id.

Off the top of my head (not tested):

var isHovering = false;
$('.node').mouseover(function() {
      isHovering = $(this).attr('id');
}).mouseout(function() {
      isHovering = isHovering == $(this).attr('id') ? false : isHovering; //don't change if mouse on different node
});

and then in your ajax() function:

//Tooltip init code snippet
$.ajax({
    type: "GET",
    url: "/tooltip/" + Tooltip.slug,
    dataType: "json",
    global: false,
    success: function(data) {
        if(isHovering == $(this).attr('id')) {
           $('.tt').html(data.description);
           Tooltip.init();
           $('.tt').attr("style","left:"+Tooltip.settings.left_offset+"px;top:"+Tooltip.settings.top_offset+"px");
           $('.tt').show();
        }

        Tooltip.cache[slug] = data; //still cache it
    }
});