Question

我希望在5秒鼠标输入后显示我的工具提示。

我尝试使用代码

$('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);
});

但工具提示延迟无效。我希望淡化它并延迟它。请帮我。

Answer 1

延迟需要在fadein之前作为链的一部分，如下所示：

$('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);
});

我希望这有帮助！

Answer 2

你应该这样做：

$('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);
});

此修改是以5秒延迟执行代码。代码每次都会添加一个新元素，因此您可以考虑重写或清理任何现有的工具提示

Answer 3

如何使用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);

});

注意：为了不担心如何在传递给this的函数中设置setTimeout，我将$(this)保存在超时函数之外的局部变量中。

在mouseenter jquery中使用延迟

3 个答案: