mouseout/mouseover simple tooltip flashing problem
I have written a really simple tooltip style rollover that tracks the mouse position and on mouseover displays a span.
This is all working great the problem is when the user moves the mouse the browser processes the movement of the span slightly slower than the mouse causing a mouseout when the mouse moves over the displayed span tag. This results in the span to fadein/fadeout a few times (flash)
I have reduced this by adding a 5x 5y space but if the user moves the mouse with a bit of speed it catches up.
I have tried on the mouseout checking if ($(this).not('span')) but im guessing 'this' will be the 'a' selector from the mouse out.
My initial guess would be to check on mouse out that the user is not 'mouseover' on the span tooltip then fadeout I just can't figure out how to approach this.
-
$(document).ready(function() {
$('span').hide();
$("a").mouseover(function() {
var id = '.'+$(this).attr("id");
$(id).fadeIn(600);
$().mousemove(function(e){
$(id).css("top",e.pageY+5);
$(id).css("left",e.pageX+5);
});
});
$("a").mouseout(function() {
$("span").fadeOut(400);
});
});
thanks in advance
John