Question

I am currently using this code:

    $('#startLabel').live('mouseover',function(){
$('.startTooltip').fadeIn();
     });

    $('#startLabel').live('mouseout',function(){
$('.startTooltip').fadeOut();
     }); 

to display a tooltip div when the user hovers over the #startLabel div and hide the tooltip when the user moves the cursor away.

I want to change this so that the tooltip will not appear until the #startLabel div has been hovered over for 3 seconds, could someone tell me how I can do this?

I’ve tried this:

    $('#startLabel').live('mouseover',function(){
    setTimeout( function() {
$('.startTooltip').fadeIn();
}, 3000 );
     });

but the tooltip still appears if you hover over it quickly and then hover away.

Thanks for any help.

Answer 1

I suspect what you want is the clearTimeout function.

You’d use it something like this:

var timer;
$('#startLabel').live('mouseover',function(){
    timer = setTimeout( function() {
    $('.startTooltip').fadeIn();
    }, 3000 );
});

$('#startLabel').live('mouseout',function(){
    $('.startTooltip').fadeOut();
    cancelTimeout(timer);
}); 

Essentially setTimeout returns a value that can be used to cancel that timeout so you just cancel it if you move out of the area in question.