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

Question

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

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

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

那么当我将鼠标移到上面时，如何显示工具提示“ 这是标题 ”？

不过，我不想使用任何工具提示插件。

Answer 1

你的生活有点难以说你不想利用别人已经做过的任何工作。 ： - ）

部分组成部分：

• 您可以通过ul或jQuery查找具有title属性的所有$元素：

  var targets = $("ul[title]");
  

• 您可以观看mouseenter事件，如果没有mouseleave事件在X毫秒内触发，请显示您的工具提示。 （这些是特定于IE的事件，但jQuery在所有浏览器上提供它们，这非常有用。它还提供了hover，这只是连接mouseenter和mouseleave的便捷方式处理程序。）虽然这意味着您正在连接事件处理程序的批次（因为mouseenter和mouseleave不会冒泡 - 部分原因使它们变得如此方便）。您最好在文档级跟踪mouseover / mouseout并处理出现的复杂情况，因为他们做泡沫。

• 要显示您的工具提示，您可以获取相关元素的位置（通过offset）并在附近显示一个包含标题的绝对定位div（您可以通过attr）。

• 当用户将鼠标移出工具提示（mouseleave）时，请将其删除。

但同样，您可以考虑使用已经完成此项目的代码中的代码，找到所有皱纹等。首先阅读代码以确保它正在执行您想要的操作而不是您不想要的内容，但是重新发明轮子通常（并不总是！）浪费时间......即使你最终没有使用插件，阅读以查看陷阱可能有用。

Answer 2

获取标题属性

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

从那里开始工作。 Jquery中没有神奇的“title_tooltip_popup（）”函数，因此您可以考虑自己制作或使用插件。

---

请记住，如果你正在使用这个选择器的类

$('.letters')

可能会引用超过1个元素