Javascript 鼠标悬停时的文本工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5334896/
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
Text tooltip on mouseover
提问by Gabriel
I have a set of bullets, and I'd like to create a tooltip when I mouse over each of them individually. The tooltip text can be the bullets title tag, and it needs to be outputted into a tooltip container. Newbie to javascript so this is where I need the help.
我有一组项目符号，当我分别将鼠标悬停在每个项目符号上时，我想创建一个工具提示。tooltip文本可以是bullets标题标签，需要输出到tooltip容器中。javascript 新手，所以这是我需要帮助的地方。
Here's my CSS:
这是我的 CSS：
.container ul { width: 300px; height: 30px; display: block; background: #CCC; }
.container li { width: 28px; height: 28px; display: block; float: left; border: 1px solid #FFF; }
.tooltip { width: auto: height: 12px; display: block; }
My HTML:
我的 HTML：
<div id="tooltip" class="tooltip"></div>
<div class="container">
<ul>
<li class="book" title="book"></li>
<li class="movie" title="movie"></li>
<li class="tv" title="tv"></li>
</ul>
</div>
And my javascript:
还有我的 javascript：
<script>
$(document).ready(function(){
$("ul li").mouseover(function() {
$("#tooltip").text($(this).attr("title"));
});
});
</script>
采纳答案by Davuth
change from
从改变
$("#tooltip").text("this.val(alt)")
$("#tooltip").text("this.val(alt)")
to
到
$("#tooltip").text($(this).attr('alt'));
$("#tooltip").text($(this).attr('alt'));
回答by ctcherry
This doesn't directly answer your question, but there are some handy jQuery plugins that already exist for this functionality. I like this one: http://craigsworks.com/projects/qtip/a
这并不能直接回答您的问题，但是已经存在一些用于此功能的方便的 jQuery 插件。我喜欢这个：http: //craigsworks.com/projects/qtip/a
Some others: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
其他一些：http: //www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
回答by Václav
I would suggest jQuery UI feature tooltip.
我建议使用 jQuery UI 功能工具提示。
Tooltip text is often taken from title attribute of element on which you use this feature - but you may get it elsewhere.
工具提示文本通常取自您使用此功能的元素的标题属性 - 但您可能会在其他地方获得它。
You may set position of tooltip and also position of text inside.
您可以设置工具提示的位置以及内部文本的位置。
$('textarea').tooltip({
position: {
my: 'left center',
at: 'right center'
}
});
But you may get text for tooltip anywhere in code.
但是您可能会在代码中的任何位置获取工具提示文本。
$('select').tooltip({
position: {
my: 'right center',
at: 'left center'
},
content: function(){
if($(this).find('option:selected').val() == 0 )
{
return '...';
}
else
{
return '...' + $(this).find('option:selected').val() + '...';
}
}
});
like in this case where tooltip contains text based on selected option - or any else text.
就像在这种情况下，工具提示包含基于所选选项的文本 - 或任何其他文本。
