Skip to main content
 首页 » 编程设计

jquery之结合jquery的cluetip和hoverintent

2026年07月31日7emanlee

我正在使用 jquery 的提示提示来显示工具提示:-) 我将它们设置为粘性,因为我希望用户能够将鼠标移动到显示的工具提示 - 如果他们愿意的话。但是,如果用户没有将鼠标移动到工具提示,我希望工具提示在一段时间后消失。在我看来,使用hoverintent-plugin应该可以做到这一点。但除非用户将鼠标移到插件上一次,否则该插件不会触发。如果发生这种情况,cluetip 会自行删除工具提示...

如何显示工具提示,等待 500 毫秒,如果用户没有将鼠标悬停在工具提示上,工具提示就会消失?

我一直在考虑用 onShow 触发计时器,在工具提示中添加一个脚本,使 onmouseover 禁用计时器之类的东西,但这似乎过于复杂......

有人有更好的主意吗? :-)

谢谢

保罗

请您参考如下方法:

我不知道支持该功能的工具提示插件,因此您可能必须自己创建一些东西。以下示例有效,尽管使其通用、可重用并使用工具提示插件需要更多工作。

<a href="#" onclick="activateTip()">click here</a> 
<div id="tooltip" style="background: green; height: 30px; width: 50px; color: white; 
   display: none; position: absolute"> 
   fake tooltip 
</div> 
<script type="text/javascript"> 
 
    function activateTip() { 
       $("#tooltip").fadeIn(autoFade); 
    } 
 
    function autoFade() { 
       var cancel = setTimeout(hideTip, 3000); 
       $("#tooltip").mouseover(function () { 
          clearTimeout(cancel); 
          $("#tooltip").unbind("mouseover").mouseout(autoFade); 
       }); 
    } 
 
    function hideTip() { 
       $("#tooltip").fadeOut().unbind("mouseover").unbind("mouseout"); 
    } 
 
</script>