CODEWITHSUNDEEP
javascriptjquerytooltipdelay
Dinuka Thilanga
Dinuka Thilanga

Reputation: 4330

use delay in mouseenter jquery

I want show my tool tip after 5 second mouse enter.

I try following code

$('thead').mouseenter( function() {
      var tooltip =  $('<div id="tooltip" class="tooltip-container" style="display: block;">'
        +   '<div class="tooltip ">'
        +   '<div class="tooltip-pointer"></div>'  
        +   '<div class="tooltip-body">'
        +   'Test description'
            +   '</div>'
        +   '</div>'
        +   '</div>').hide().fadeIn(1000);

    $(this).append(tooltip).delay(5000);
});

But tool tip delay is not working. I want fade it and delay it. Please help me.

Upvotes: 2

Views: 4301

Answers (3)

dSquared
dSquared

Reputation: 9825

The delay needs to go before the fadein as part of the chain like this:

$('thead').mouseenter( function() {
      var tooltip =  $('<div id="tooltip" class="tooltip-container" style="display: block;">'
        +   '<div class="tooltip ">'
        +   '<div class="tooltip-pointer"></div>'  
        +   '<div class="tooltip-body">'
        +   'Test description'
            +   '</div>'
        +   '</div>'
        +   '</div>').hide();

    $(this).append(tooltip);
    tooltip.delay(5000).fadeIn(1000);
});

I hope this helps!

Upvotes: 3

nnnnnn
nnnnnn

Reputation: 150010

How about using setTimeout:

$('thead').mouseenter( function() {
   var el = $(this);

   setTimeout(function() {
      var tooltip = $('<div id="tooltip" class="tooltip-container" style="display: block;">'
                  +   '<div class="tooltip ">'
                  +   '<div class="tooltip-pointer"></div>'  
                  +   '<div class="tooltip-body">'
                  +   'Test description'
                  +   '</div>'
                  +   '</div>'
                  +   '</div>').hide().fadeIn(1000);

      el.append(tooltip);
   }, 5000);

});

Note: so as not to worry about how this is set within the function passed to setTimeout I'm saving $(this) in a local variable outside the timeout function.

Upvotes: 0

Mihalis Bagos
Mihalis Bagos

Reputation: 2510

You should do it like so:

$('thead').mouseenter( function() {
    setTimeout(function() {
      var tooltip =  $('<div id="tooltip" class="tooltip-container" style="display: block;">'
        +   '<div class="tooltip ">'
        +   '<div class="tooltip-pointer"></div>'  
        +   '<div class="tooltip-body">'
        +   'Test description'
            +   '</div>'
        +   '</div>'
        +   '</div>').hide().fadeIn(1000);

    $(this).append(tooltip);
    },5000);
});

This modification is to execute the code with a 5sec delay. The code will add a new element eachtime though, so you might consider rewriting or cleaning up any existing tooltips

Upvotes: 0

Related Questions