带有悬停的 Jquery 工具提示答案

【问题标题】：Jquery Tooltip with hover带有悬停的 Jquery 工具提示
【发布时间】：2014-11-21 02:45:06
【问题描述】：

我有一个小的工具提示脚本，当用户悬停一个块时，工具提示将显示，如果用户离开该块，工具提示将被隐藏。

但我还希望当用户将鼠标悬停在工具提示上时，工具提示会一直保持到用户离开工具提示或悬停块。

这是我的 javascript，没有将鼠标悬停在工具提示上：

$( "#hover, .tooltip" ).on('mouseenter', function() { 
   $( ".tooltip" ).fadeToggle( 400, function() {
       // Animation complete.
    });
});

$( ".tooltip, #hover" ).on('mouseleave', function() {
      $( ".tooltip" ).fadeToggle( 400, function() {
         // Animation complete.
      });
});

这是一个没有第二部分的小小提琴： http://jsbin.com/vocirucawoje/1/edit

【问题讨论】：

我猜，它按预期工作，如果没有，你能指出我，你需要什么？
几乎，当您悬停工具提示时，工具提示会闪烁，因为我离开悬停框的时间很短

标签： javascript jquery css hover tooltip

【解决方案1】：

使用 stop() 停止动画。

$( "#hover, .tooltip" ).on('mouseenter', function() { 
   $( ".tooltip" ).stop().fadeToggle( 400, function() {
       // Animation complete.
    });
});

$( ".tooltip, #hover" ).on('mouseleave', function() {
      $( ".tooltip" ).stop().fadeToggle( 400, function() {
         // Animation complete.
      });
});

【讨论】：

有没有一个很好的方法来延迟淡出？我尝试了类似的方法，但又出现了这些闪烁：$( ".tooltip, .inner-container" ).on('mouseleave', function() { $( ".tooltip" ).stop().delay(800).fadeOut( 400, function() { // Animation complete. }); });
请尝试使用setTimeout函数。这是延迟的官方 cmets，“.delay() 方法最适合在排队的 jQuery 效果之间延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不是替代 JavaScript 的原生 setTimeout 函数，这可能更适合某些用例。”。有关详细信息，请参阅api.jquery.com/delay。

【解决方案2】：

<input type="button" class="hover" value="Click" />
<div class="tooltip" style="display:none;">Tool tip Text</div>


$('.hover').mouseenter(function () {
    $(".tooltip").stop().fadeToggle(400, function () {
        // Animation complete.
    });
});
$('.tooltip').mouseleave(function () {
    $(".tooltip").fadeToggle(400, function () {
        // Animation complete.
    });
});

它会帮助你。

【讨论】：

是的，这就是我已经在我的小提琴中的内容，但我也希望如果用户超过工具提示，工具提示仍然存在。无论如何感谢您的帮助！
代码改了，我想你的要求会满足