【问题标题】:Keep tooltip opened when the mouse is over it鼠标悬停时保持工具提示打开
【发布时间】:2011-06-23 09:57:04
【问题描述】:

我想使用 jquery 创建一个简单的工具提示。当用户悬停某个链接时,旁边应该会出现一个带有一些动态内容的小框。我唯一想不通的是当鼠标悬停在工具提示本身上时如何保持工具提示打开?如果鼠标离开链接,则提示应该自动关闭,除非鼠标悬停在提示本身上,因为提示中会有一些链接,用户应该可以点击它...

谁能指出如何使用 jquery 做到这一点?

【问题讨论】:

标签: javascript jquery tooltip


【解决方案1】:

如果您只想让它工作,请使用专用插件之一,例如qtip.

如果您出于某种原因想要或必须自己做,我就是这样做的。
当鼠标离开链接时,您不会立即关闭工具提示,而是设置 setTimout 关闭处理程序。如果在 0.5 秒内鼠标返回工具提示或链接,则取消处理程序。为此,您可以将超时 id(由setTimeout 返回)存储为与工具提示关联的 jquery 数据对象。

【讨论】:

    【解决方案2】:

    更新:现在使用 jQuery UI 工具提示要好得多。
    网址:http://jqueryui.com/tooltip/


    不要编写自己的工具提示,而是使用任何可用的 jQuery 工具提示插件。

    simpletip 是我以前用过的一个不错的。

    $("jquery selector").simpletip({
       fixed: true
    });
    

    【讨论】:

    • 这个 JQueryUI 的工具提示替代方案很简单,并且解决了 JQ UI 的一些工具提示限制...谢谢! ;)
    • @MarceloMyara:问这个问题时它不在那里
    • 事实上我表达自己的方式很糟糕:: 我非常感谢你的提示。我正在使用 JQueryUI 工具提示,并面临一些建议的简单提示完美解决的限制。 ;) +1
    • 真的认为你应该留下这个建议(因为现在可能发现这篇文章的用户已经知道 JQueryUI 的 Tooltip 但可能不知道 simpleytip)。
    【解决方案3】:

    如果链接和工具提示之间没有空格,只需让工具提示作为链接的子节点,并在链接上使用 mouseenter 和 mouseleave 事件。

    【讨论】:

      【解决方案4】:

      试试这个: jQuery Tooltip Plugin

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-12-30
        • 2014-04-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多