当鼠标悬停在工具提示上时保持打开 [英] Keep tooltip opened when the mouse is over it

问题描述

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

I want to create a simple tooltip using jquery. When the user hovers some link a small box should appear next to it with some dynamic content. The only thing I can't figure out it is how to keep the tooltip opened when the mouse is over the tooltip itself? If the mouse is out of the link the tooltip should be closed automatically, except when the mouse is over the tooltip itself, because there will be some links in the tooltip and users should be able to click it...

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

Can anyone please point out how this can be done using jquery?

推荐答案

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

If you just want get it working, use one of dedicated plugins, e.g. qtip.

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

If you, for some reason, want or have to do it yourself, here's how I did it.
You do not close tooltip immediately when mouse leaves link, but setup setTimout close handler. If in, say, 0.5 seconds mouse returns over tooltip or link, you cancel handler. To do that, you can store timeout id (retured by setTimeout) as jquery data object associated with tooltip.

这篇关于当鼠标悬停在工具提示上时保持打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！