如何使用jQuery在hover时显示工具提示消息？
正如标题所述，如何使用jQuery在hover时显示工具提示消息？
我build议qTip 。
工具提示插件可能太重，你需要什么。 只需将“标题”属性设置为您希望在工具提示中显示的文本即可。
$("#yourElement").attr('title', 'This is the hover-over text');
看看jQuery的工具提示插件 。 你可以通过一个选项对象来select不同的选项。
还有其他的替代工具提示插件可用，其中有一些是可用的
-
Random.Next（）的jQuery AJAX工具提示
-
dhtml好吃的AJAX工具提示
-
clueTip
看看演示和文档，如果您有关于如何在代码中使用它们的具体问题，请更新您的问题。
以下将像一个魅力（假设你有"id"="myId"有div / span / table / tr / td / etc）
$("#myId").hover(function() { $(this).css('cursor','pointer').attr('title', 'This is a hover text.'); }, function() { $(this).css('cursor','auto'); });
作为补充， .css('cursor','pointer')将在鼠标hover时更改鼠标指针。
由于推荐qTip和其他项目是相当老，我build议使用qTip2，因为它是最新的。
您可以使用引导工具提示 。 不要忘记初始化它。
<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation"> inside span </span>
将在左侧显示文字说明。
并用js运行它：
$('.tooltip-r').tooltip();
看看ToolTipster
- 使用方便
- 灵活
- 相当于一些其他的工具提示插件（39kB）
- 看起来更好，没有额外的造型
- 有一个很好的预定义的主题
<a class="tooltips"> Hover Me <span>My Tooltip Text</span> </a> <style> a.tooltips { position: relative; display: inline; } a.tooltips span { position: absolute; width: 200px; color: #FFFFFF; background: #000000; height: 30px; line-height: 30px; text-align: center; visibility: hidden; border-radius: 6px; } a.tooltips span:after { content: ''; position: absolute; top: 100%; left: 35%; margin-left: -8px; width: 0; height: 0; border-top: 8px solid #000000; border-right: 8px solid transparent; border-left: 8px solid transparent; } a:hover.tooltips span { visibility: visible; opacity: 0.8; bottom: 30px; left: 50%; margin-left: -76px; z-index: 999; } </style>
