jQuery：显示没有链接的工具提示答案

【问题标题】：jQuery: Show tooltip without linkjQuery：显示没有链接的工具提示
【发布时间】：2010-04-03 14:21:31
【问题描述】：

是否可以在不创建链接的情况下显示工具提示？

例如，我有以下没有链接的代码：

<ul class="letters" title="This is the title">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

那么当我将鼠标悬停在工具提示“This is the title”上时，如何显示它？

顺便说一句，我不想使用任何工具提示插件。

【问题讨论】：

【解决方案1】：

说你不想利用其他人已经完成的任何工作，这让你的生活变得更加艰难。 :-)

部分组成部分：

您可以通过$ 或jQuery 找到所有具有title 属性的ul 元素：
```
var targets = $("ul[title]");
```
您可以观察它们的 mouseenter 事件，如果在 X 毫秒内没有触发 mouseleave 事件，则显示您的工具提示。（这些是 IE 特定的事件，但 jQuery 在所有浏览器上都提供了它们，这非常有帮助。它还提供了hover，这只是连接mouseenter 和mouseleave 处理程序的一种方便方式。）虽然这意味着您正在连接很多事件处理程序（因为 mouseenter 和 mouseleave 不会冒泡——这也是它们如此方便的部分原因）。您最好在文档级别跟踪 mouseover/mouseout 并处理出现的复杂性，因为它们会冒泡。
要显示您的工具提示，您可以获取相关元素的位置（通过offset）并在附近显示一个绝对定位的div，其中包含标题（您可以通过attr 获得） .
当用户将鼠标移出工具提示 (mouseleave) 时，将其移除。

但同样，您可能会考虑使用已经完成此操作的项目中的代码，发现所有的皱纹等。首先通读代码以确保它在做您想要的而不是您不想要的，但是重新发明轮子通常（并非总是！）浪费时间...即使您实际上并没有最终使用该插件，通读一遍以了解其中的陷阱可能是有用的。

【讨论】：

【解决方案2】：

获取title属性

title = $('.letters').attr('title');

然后从那里开始工作。 Jquery 中没有神奇的“title_tooltip_popup()”函数，所以你可以考虑自己制作或使用插件。

请记住，如果您正在使用此选择器的类

$('.letters')

可能引用超过 1 个元素

【讨论】：