我通过制作部分文字来诠释我的博客,工具提示在您悬停时会看到相关图像(http://www.reidcovington.com)。然而,有一个奇怪的问题是: A)只要您将鼠标悬停在工具提示上,图像就会首先在屏幕上显示不正确 B)你翻过的最后一个tooptip被附加到页面底部,以便在页面的左下角有一个随机图像。
这是我的Javascript:
$(document).ready(function(){
$( document ).tooltip({
toggle: 'fade',
content: function(){
var element = $( this );
var title = element.attr( 'title' );
return '<img src="/assets/' + title + '">';
}
});
});
以下是HTML的相关内容:
<span class='tooltip' title='twocats.jpg'>"No. I have 2 cats."</span><br>
- 我正在使用title属性动态显示每个工具提示的相应图像。
这是我的CSS:
.tooltip {
/*color: coral;*/
background-color: #dbe9ff;
/*border-radius: 5px;*/
}
.tooltip:hover {
background-color: #dfdbff;
color: white;
}
.ui-tooltip {
text-align: center;
border-radius: 20px;
}
有人听过/看过这个问题吗?任何关于为什么会发生这种情况的想法或更好的使用工具提示的做法,以便它不会或他们知道的解决方法适用于我想要实现的目标?