How to stop an element from fading out?

Question

I have a tooltip which appears then disappears after a couple of seconds.

function tooltip(msg) {
    tooltipStart(msg);
    tooltipExit();
}

function tooltipStart(msg) {
    $('body').append('<div id="tooltip">'+msg+'</div>');
    $('#tooltip').fadeIn(300);
}

function tooltipExit(duration) {
    if ( ! duration) {
        duration = 2000;
    }

    $('#tooltip').delay(duration).fadeOut(1000, function() {
        $('#tooltip').remove();
    });
}

I now want the tooltip to not fade out and be 100% opaque if the user hovers over the tooltip.

Do I need to rewrite the way the tooltip works or is there a way to stop the tooltipExit function when the mouse hovers over it?

Answer 1

This should do the trick!

function tooltipExit(duration) {
    $('#tooltip').delay(duration||2000).fadeOut(1000, function() {
        $(this).remove();
    }).hover(function() {
        $(this).stop().show().fadeTo(0, 100);
    }, function (){
        tooltipExit();
    });
}

The stop function stops the animation, and the show function will show the tooltip again. Then when the mouse leaves the tooltip again, after 2 seconds it will start to fade again.