Question

I have this code:

    $('#label, #btlabel').live('hover',function(){

        parent = $(this).parent().attr('id');
        position = $(this).parent().position();
        positionTop = (position.top)-45; 

        text = translate('zones_'+parent+'_tooltip',lang);

        $('span#tooltips').html(text); 
        height = $('span#tooltips').height();
        if (height == 16){positionTop = (positionTop + 16);}
        if ($(this).parent().hasClass('advanced')) {positionTop = (positionTop + 260);} 
        $('span#tooltips').css('top',positionTop).delay(5000).show(0);

     });

    $('#label, #btlabel').live('mouseout',function(){   
$('span#tooltips').hide();
     }); 

which I am using to show/hide tooltips if the label is hovered over. Delaying the show() function works fine, but I need to stop this from executing if the mouseout function is called (at the moment if you hover over the label and hover away before the 5 seconds is up, the tooltip still shows). I tried stop() but couldn’t get that to work.

Could someone explain how I can do this please?

Thanks for any help

Answer 1

As it says at http://api.jquery.com/delay/ use setTimeout instead which can be cancelled.

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn’t, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript’s native setTimeout function, which may be more appropriate for certain use cases.