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?

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?

• javascript
• jquery

• 5 10 answers in 1 minute... We're a bunch of vultures. – Joseph Marikle Commented Feb 14, 2013 at 14:44

7 Answers 7

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.

Add stop() - http://api.jquery./stop/

$('.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.stop().fadeIn(500);

}).mouseout(function(e) {

    var tip = $(this).find('.tooltip');
    tip.stop().fadeOut(500);

});

Use tip.stop().fadeIn() and tip.stop().fadeOut()

This might work, try using .stop()

 tip.stop().fadeOut('500');

You might want to check out the HoverIntent plugin.

It is designed to prevent some of these jitters.

Also of interest is Ben Alman's article on Throttling and Debouncing.

try the actual enter/leave - might not work if the tip is place where .tt loses focus when tip is displayed.

Add a stop, simplify the css to an object.

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

LIVE DEMO

Sure, using the .stop() method and mouseenter mouseleave

$('.tt').on('mouseenter mouseleave', function( e ) { 

    var elOpacity = e.type=='mouseenter' ? 1 : 0 ;
    var $tip = $(this).find('.tooltip');

    $('.tooltip').css({top: 0, right: -200 });
    $tip.stop().fadeTo(500, elOpacity);

});

The .on() method in the example above allows you to create a 'list' of events we're interested in,
than inside a Conditional operator (Ternary (?:) ) we listen for the e (event) changes and assing a value for the element opacity passing it to .fadeTo() animation method.
.stop() will end a previous animation without creating animation buildups.

Read more:
http://api.jquery./stop/
http://api.jquery./fadeto/
http://api.jquery./on/
http://api.jquery./mouseenter/
http://api.jquery./mouseleave/
Additionally explore:
http://api.jquery./hover/
https://developer.mozilla/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator