jQuery工具工具提示,绝对位置和&余量 [英] jQuery tools tooltip, position with absolute & margin
问题描述
我正在使用jquery插件: Tools.tooltip()似乎像定位确实是一个问题。
I'm using the jquery plugin: Tools.tooltip() Seems like the positioning is really a problem.
当工具提示被包装在一个位置为绝对的容器中时,你需要添加 relative:true
在conf词典中,以便工具提示正确定位。
When the tooltip is wrapped in some container with position:absolute, you'll need to add relative:true
in the conf dictionary so the tooltips are positioned properly.
现在的问题是:如果你有两个的位置:绝对
包装器以及带保证金的工具提示触发器,位置将被搞砸
Now the problem is: if you have both a position:absolute
wrapper as well as tooltip triggers with margin, the position will be messed up
<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>
工具提示应显示在触发器下方并在此情况下居中。但当鼠标悬停在触发器(红色框)上时,工具提示(灰色框)显示在此位置:
The tooltip is supposed to show beneath the trigger and centered in this case. But when mouse over the trigger(red box), tooltip(gray box) is showing at this position:
好像完全忽略了保证金。另外,如果我根本不使用保证金(只有一个位置的包装:绝对并且在conf中使用relative:true),工具提示仍然显示在一个奇怪的位置:
As if the margin is totally ignored. Also, if I don't use margin at all(only having a wrapper of position:absolute and uses relative:true in conf), the tooltip still shows up in a strange position:
工具提示有点左侧和顶部与正确位置相比,我不知道。
The tooltip is a little bit to the left and top comparing to the correct position, which I have no idea about.
我如何解决这个问题?非常感谢! :)
How may I solve this problem? Thanks a lot! :)
推荐答案
所以如果有人想使用jQuery工具工具提示:
So if anyone wants to use jQuery tool tooltip:
- 如果工具提示包含在'position:absolute'或
'位置:固定'容器,则使用ini
配置提供'relative:true'。 - 在这种情况下,不要在工具提示的触发器上添加任何边距
这篇关于jQuery工具工具提示,绝对位置和&余量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!