鼠标悬停时的文本工具提示
鼠标悬停时的文本工具提示
提问于 2011-03-17 12:34:23
我有一组项目符号，当我将鼠标放在每个项目符号上时，我想创建一个工具提示。工具提示文本可以是项目符号title标记，它需要输出到工具提示容器中。javascript的新手，所以这是我需要帮助的地方。
这是我的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; }我的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>和我的javascript：
<script>
$(document).ready(function(){
$("ul li").mouseover(function() {
$("#tooltip").text($(this).attr("title"));
});
});
</script>回答 3
Stack Overflow用户
回答已采纳
发布于 2011-03-17 13:11:31
更改自
$("#tooltip").text("this.val(alt)")
至
$("#tooltip").text($(this).attr('alt'));
Stack Overflow用户
发布于 2011-03-17 12:37:17
这并没有直接回答您的问题，但是已经有一些方便的jQuery插件可以实现此功能。我喜欢这个：http://craigsworks.com/projects/qtip/a
其他一些：http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
Stack Overflow用户
发布于 2015-02-01 03:18:33
我建议您使用jQuery UI功能工具提示。
工具提示文本通常取自您使用此功能的元素的title属性-但您也可以在其他地方获得它。
您可以设置工具提示的位置，也可以设置文本的位置。
$('textarea').tooltip({
position: {
my: 'left center',
at: 'right center'
}
});但是你可以在代码中的任何地方获得工具提示的文本。
$('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() + '...';
}
}
});就像在这种情况下，工具提示包含基于所选选项的文本-或任何其他文本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5334896
复制相关文章
相似问题
腾讯云开发者
