Question

I have a function im trying to write that shows a tooltip on hover and fades it out on mouseleave:

$('.tt').mouseover(function(e) { 
    var tip = $(this).find('.tooltip');              
    //Set the X and Y axis of the tooltip
    $('.tooltip').css('top', 0 );
    $('.tooltip').css('right', -200);
    tip.fadeIn('500');
}).mouseout(function(e) {
    var tip = $(this).find('.tooltip');
    tip.fadeOut('500'); 
});

If the user gets erratic with the mouse and hovers multiple times the tooltip flashes, essentially. Is there a way I can prevent this?

Answer 1

You’re looking for .stop( [clearQueue ] [, jumpToEnd ] ).

tip.stop(true, true).fadeIn(500);
tip.stop(true, true).fadeOut(500);

You can find out more about .stop() here.