如何使用 jQuery 在悬停时显示工具提示消息？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1333546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I display a tooltip message on hover using jQuery?
提问by Senthil Kumar Bhaskaran
As the title states, how can I display a tooltip message on hover using jQuery?
正如标题所述，如何使用 jQuery 在悬停时显示工具提示消息？
回答by psychotik
Tooltip plugin might be too heavyweight for what you need. Simply set the 'title' attribute with the text you desire to show in your tooltip.
工具提示插件可能对于您的需要来说太重了。只需将“标题”属性设置为您希望在工具提示中显示的文本。
$("#yourElement").attr('title', 'This is the hover-over text');
回答by being_ethereal
Following will work like a charm (assuming you have div/span/table/tr/td/etc with "id"="myId")
以下将像魅力一样工作（假设您有 div/span/table/tr/td/etc "id"="myId"）
$("#myId").hover(function() {
$(this).css('cursor','pointer').attr('title', 'This is a hover text.');
}, function() {
$(this).css('cursor','auto');
});
As a complimentary, .css('cursor','pointer')will change the mouse pointer on hover.
作为免费，.css('cursor','pointer')将在悬停时更改鼠标指针。
回答by Russ Cam
take a look at the jQuery Tooltip plugin. You can pass in an options object for different options.
看看 jQuery Tooltip 插件。您可以为不同的选项传入一个选项对象。
There are also other alternative tooltip plugins available, of which a few are
还有其他替代工具提示插件可用，其中一些是
Take look at the demos and documentation and please update your question if you have specific questions about how to use them in your code.
查看演示和文档，如果您有关于如何在代码中使用它们的具体问题，请更新您的问题。
回答by berni
回答by Black
You can use bootstrap tooltip. Do not forget to initialize it.
您可以使用引导工具提示。不要忘记初始化它。
<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation">
inside span
</span>
Will be shown text Explanation on the left side.
将在左侧显示文本说明。
and run it with js:
并用js运行它：
$('.tooltip-r').tooltip();
回答by pixparker
Take a look at ToolTipster
看看工具提示
- easy to use
- flexible
- pretty lightweight, compared to some other tooltip plugins (39kB)
- looks better, without additional styling
- has a good set of predefined themes
- 便于使用
- 灵活的
- 与其他一些工具提示插件 (39kB) 相比，相当轻巧
- 看起来更好，没有额外的造型
- 有一套很好的预定义主题
回答by Nalan Madheswaran
You can do it using just css without using any jQiuery.
您可以仅使用 css 而无需使用任何 jQiuery。
<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>
