是否可以在不建立链接的情况下显示工具提示？
例如,我有以下没有链接的代码:
<ul class="letters" title="This is the title">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
那么当我将鼠标悬停在它上面时,如何显示工具提示" 这是标题 "？
顺便说一下,我不想使用任何工具提示插件.
如果你不想利用其他人已经完成的任何工作,你就会更加努力地生活.:-)
一些组成部分:
您可以通过或找到ul具有title属性的所有元素:$jQuery
var targets = $("ul[title]");
您可以观看它们的mouseenter事件,如果mouseleave在X毫秒内没有事件触发,则显示您的工具提示.(这些是特定于IE的事件,但jQuery在所有浏览器上提供它们,这非常有用.它还提供了hover,这只是一种连接mouseenter和mouseleave处理程序的便利方式.)虽然这意味着你正在连接很多事件处理程序(因为mouseenter和mouseleave不要泡沫 - 使它们变得如此方便的一部分).你可能会更好地跟踪mouseover/ mouseout在文档级别并处理出现的复杂性,因为它们会冒泡.
要显示您的工具提示,您可以获取相关元素的位置(通过offset)并显示div包含标题的绝对位置(您可以通过它获得attr).
当用户将鼠标移出工具提示(mouseleave)时,将其删除.
但同样,您可以考虑使用已经完成此项目的代码中的代码,找到所有皱纹等.首先阅读代码以确保它正在执行您想要的而不是您不想要的东西,但重新发明轮子通常(并不总是!)浪费时间......即使你最终没有使用插件,阅读以查看陷阱可能有用.