jquery - 结合jquery的cluetip和hoverintent？

Question

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

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

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

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

谢谢

保罗

Answer 1

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

<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>