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屋！