jQuery 工具工具提示，绝对位置和位置利润

Question

我正在使用 jquery 插件： Tools.tooltip() 看起来定位是确实是个问题。

当工具提示用position:absolute封装在某个容器中时，您需要在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>

在这种情况下，工具提示应该显示在触发器下方并居中。但是当鼠标悬停在触发器（红色框）上时，工具提示（灰色框）将显示在此位置：

就好像边距完全被忽略了一样。另外，如果我根本不使用边距（仅具有position:absolute的包装并在conf中使用relative:true），工具提示仍然显示在一个奇怪的位置：

与正确位置相比，工具提示有点偏左和偏上，我对此一无所知。

我该如何解决这个问题？多谢！ :)

Answer 1

因此，如果有人想使用 jQuery 工具提示：

• 如果工具提示被包裹在 'position:absolute' 或
  'position:fixed' 容器，使用 ini 提供 'relative:true'
  配置。
• 在这种情况下，不要向工具提示的触发器添加任何边距

Answer 2

我给你做了一个小小提琴，“有点”解决了你的问题。

在此小提琴中，工具提示放置在触发器下方，但需要 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') 
        });
    }
 });