jQuery工具工具提示,绝对位置和&余量

时间:2011-12-02 11:09:31

标签: jquery tooltip jquery-tools

我正在使用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>

工具提示应该显示在触发器下方并且在这种情况下居中。但当鼠标悬停在触发器(红色框)上时,工具提示(灰色框)显示在此位置:

enter image description here

好像边际完全被忽略了。另外,如果我根本不使用margin(只有一个position的包装器:绝对并且在conf中使用relative:true),工具提示仍会显示在一个奇怪的位置:

enter image description here

与正确的位置相比,工具提示在左侧和顶部稍微有点,我不知道。

我该如何解决这个问题?非常感谢! :)

2 个答案:

答案 0 :(得分:2)

所以,如果有人想使用jQuery工具工具提示:

  • 如果工具提示包裹在'position:absolute'或 'position:fixed'容器,与ini供应'relative:true' 配置。
  • 在这种情况下,请勿在工具提示的触发器中添加任何边距

答案 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') 
        });
    }
 });