use delay in mouseenter jquery

Question

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.

Answer 1

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!