我正在使用jquery插件:Tools.tooltip()似乎定位确实是一个问题。
当工具提示被包装在一个位置为绝对的容器中时,您需要在conf字典中添加relative:true
,以便正确定位工具提示。
现在的问题是:如果你同时拥有一个position:absolute
包装器以及带边距的工具提示触发器,那么这个位置就会搞砸了
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
<style>
.trigger
{
width:100px;
height:40px;
background-color:red;
margin:5px;
position:relative;
}
.tooltip
{
display:none;
color:white;
background-color:#333;
padding:10px;
border-radius:3px;
}
</style>
<div class='wrapper' style='position:absolute;left:100px;top:100px'>
<div class='trigger' style='margin-top:100px;margin-left:100px'>
hover to see the tooltip
</div>
<div class='tooltip'>
The awesome tooltip
</div>
</div>
<script type='text/javascript'>
$('.trigger').tooltip({
position:'bottom center',
relative:true,
});
</script>
工具提示应该显示在触发器下方并且在这种情况下居中。但当鼠标悬停在触发器(红色框)上时,工具提示(灰色框)显示在此位置:
好像边际完全被忽略了。另外,如果我根本不使用margin(只有一个position的包装器:绝对并且在conf中使用relative:true),工具提示仍会显示在一个奇怪的位置:
与正确的位置相比,工具提示在左侧和顶部稍微有点,我不知道。
我该如何解决这个问题?非常感谢! :)
答案 0 :(得分:2)
所以,如果有人想使用jQuery工具工具提示:
答案 1 :(得分:1)
我让你有点小提琴,“kindda”解决了你的问题。
在这个小提琴中,工具提示位于触发器下方,但需要x个“悬停”才能使其100%正确放置。我认为这是由工具提示库中的某些(错误)功能引起的。
这是小提琴:http://jsfiddle.net/Gjw74/1/
修改后的javascript:
$('.trigger').tooltip({
position:'bottom center',
relative:true,
onShow: function(){
var $trigger = this.getTrigger();
this.getTip().css({
'margin-top' : $trigger.css('margin-top'),
'margin-left' : $trigger.css('margin-left')
});
}
});