【发布时间】:2011-06-23 09:57:04
【问题描述】:
我想使用 jquery 创建一个简单的工具提示。当用户悬停某个链接时,旁边应该会出现一个带有一些动态内容的小框。我唯一想不通的是当鼠标悬停在工具提示本身上时如何保持工具提示打开?如果鼠标离开链接,则提示应该自动关闭,除非鼠标悬停在提示本身上,因为提示中会有一些链接,用户应该可以点击它...
谁能指出如何使用 jquery 做到这一点?
【问题讨论】:
标签: javascript jquery tooltip
我想使用 jquery 创建一个简单的工具提示。当用户悬停某个链接时,旁边应该会出现一个带有一些动态内容的小框。我唯一想不通的是当鼠标悬停在工具提示本身上时如何保持工具提示打开?如果鼠标离开链接,则提示应该自动关闭,除非鼠标悬停在提示本身上,因为提示中会有一些链接,用户应该可以点击它...
谁能指出如何使用 jquery 做到这一点?
【问题讨论】:
标签: javascript jquery tooltip
如果您只想让它工作,请使用专用插件之一,例如qtip.
如果您出于某种原因想要或必须自己做,我就是这样做的。
当鼠标离开链接时,您不会立即关闭工具提示,而是设置 setTimout 关闭处理程序。如果在 0.5 秒内鼠标返回工具提示或链接,则取消处理程序。为此,您可以将超时 id(由setTimeout 返回)存储为与工具提示关联的 jquery 数据对象。
【讨论】:
更新:现在使用 jQuery UI 工具提示要好得多。
网址:http://jqueryui.com/tooltip/
不要编写自己的工具提示,而是使用任何可用的 jQuery 工具提示插件。
simpletip 是我以前用过的一个不错的。
$("jquery selector").simpletip({
fixed: true
});
【讨论】:
如果链接和工具提示之间没有空格,只需让工具提示作为链接的子节点,并在链接上使用 mouseenter 和 mouseleave 事件。
【讨论】:
试试这个: jQuery Tooltip Plugin
【讨论】: