自制jQuery工具提示脚本表现不稳定

Question

这是我的脚本：http://jsfiddle.net/w3kXj/2/

正如您所看到的，我正在尝试使复选框输入在悬停时显示.terms-of-usediv。然而，div的行为是非常不可预测的。有时它在悬停时根本不会显示，尤其是当你从下面鼠标悬停时。到底发生了什么事？有人能帮忙吗？

Answer 1

使用stop（true，true）.stop（）来修复div一直淡出的问题，但它的行为仍然有点奇怪。

$(function(){
// email results page tooltip hover
    $('.terms-of-use').hide();
    $('.agree-statement, .terms-of-use').hover(function(){
        $('.terms-of-use').stop(true,true).fadeToggle(); 
    });   
});​

http://jsfiddle.net/w3kXj/5/

我建议使用这个插件hovertent

Answer 2

我认为应该将监听器绑定到整个字段集，而不是将两个元素分别绑定。

http://jsfiddle.net/jomikr/w3kXj/10/

Answer 3

通过在工具提示触发器和工具提示本身上监听悬停和悬停，您引入了许多可能的问题。解决方案如下：

• 仅在.agree-statement上侦听mouseenter
• 在.agree-statement和.terms-of-use上侦听mouseleave
• 在mouseleave处理程序中，仅在toElement不是工具提示本身的情况下隐藏

Answer 4

我能够让它更好地工作。

http://jsfiddle.net/w3kXj/9/