Javascript 无序列表的工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7996163/
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
ToolTip For Unordered list
提问by cantfindaname88
I have an unordered list with images on the left of the list and their description on the right. My boss wants for every item in the list to give a tooltip every time the user hovers each item on the list. I tried using some jQuery plugins online however, it only allowed one tooltip for the whole item not for each item. I need help on this. A good example will be helpful.
我有一个无序列表，列表左侧有图像，右侧有它们的描述。我的老板希望在用户每次将鼠标悬停在列表中的每个项目时，为列表中的每个项目提供一个工具提示。我尝试在网上使用一些 jQuery 插件，但是，它只允许整个项目的一个工具提示，而不是每个项目。我需要这方面的帮助。一个好的例子会很有帮助。
回答by Blazemonger
Will simply adding a titleattribute to each list element be sufficient?
简单地title为每个列表元素添加一个属性就足够了吗？
<li title="tooltip goes here">Blah blah blah</li>
回答by David says reinstate Monica
This is the best I could do, which could probably be trimmed for conciseness, but it works well:
这是我能做的最好的事情，为了简洁起见，可能会对其进行修剪，但效果很好：
var pageX, pageY;
$(document).mousemove(
function(e){
pageX = e.pageX;
pageY = e.pageY;
});
$('#tooltipped li[title]').hover(
function(){
var tip = $('<div />')
.addClass('tooltip')
.text($(this).attr('title'))
.css({
'position' : 'absolute',
'top' : pageY,
'left' : pageX
});
$(tip).appendTo($(this));
$(this).mousemove(
function(){
$('.tooltip').css(
{
'top' : pageY,
'left' : pageX
});
});
},
function(){
$('.tooltip').remove();
});
Edited to remove the titleattributes (in order to prevent a second pop-up alongside the jQuery tooltip):
编辑以删除title属性（以防止在 jQuery 工具提示旁边再次弹出）：
var pageX, pageY;
$(document).mousemove(
function(e){
pageX = e.pageX;
pageY = e.pageY;
});
$('#tooltipped li[title]')
.each(
function(){
$(this).attr('data-tooltip',$(this).attr('title')).removeAttr('title');
})
.hover(
function(){
var tip = $('<div />')
.addClass('tooltip')
.text($(this).attr('data-tooltip'))
.css({
'position' : 'absolute',
'top' : pageY,
'left' : pageX
});
$(tip).appendTo($(this));
$(this).mousemove(
function(){
$('.tooltip').css(
{
'top' : pageY,
'left' : pageX
});
});
},
function(){
$('.tooltip').remove();
});
回答by Manse
Whenever I want tooltips i use the following plugin
每当我想要工具提示时，我都会使用以下插件
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
There are lots of examples on there For a list :
那里有很多示例供列表：
html :
html :
<ul id="mylist">
<li title="tooltip text">Something here</li>
</ul>
script :
脚本 ：
$('#mylist li").tooltip();
If the user doesn't have javascript enabled they will see the normal title tooltip
如果用户没有启用 javascript，他们将看到正常的标题工具提示
