Question

I’m using the following to bring in a picture and some text from another page through jquery on a hover over of an area map. I’ve got it working find when you hover, but when you hover over a new element it loads the last element and then quickly flicks to the new element. How can I clear what it has saved on the mouse out? I’ve added the mouseout function but I have no idea what to put in it! Any help will be much appreciated.

if (sPage == "fireplan.aspx") {
    jQuery('area').mousemove(function (e) {

        var url = jQuery(this).attr('tooltiphref');

        jQuery('#tooltipwindow').load('tooltip.aspx?soid=' + url);
        jQuery("#tooltipwindow").css("position", "fixed").css("top", (e.pageY - jQuery(window).scrollTop()) + "px").css("left", (e.pageX) + "px").css("display", "none").fadeIn("fast")
    });

    jQuery('area').mouseout(function () {



    });


}

Thanks, Tom

Answer 1

The reason for the “flickering” is because the old content is still inside the tooltip window when it moves since your call to .load() will take some time in comparison to moving the tooltip via .css() on the next line.

To avoid this, simply put something like the following inside your mouseout handler:

jQuery('#tooltipwindow').empty()

That will remove what was previously loaded into the tooltip, so its content will simply appear blank. A more ideal approach would be to insert some kind of activity indicator to let the user know that content is loading, like:

jQuery('#tooltipwindow').html('<div class="activityIndicator"></div>')

In this case, you’d just set the class .activityIndicator to have some background image, like an animated GIF of a spinning wheel.