jQuery tools tooltip, position with absolute & margin

问题

I'm using the jquery plugin: Tools.tooltip() Seems like the positioning is really a problem.

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:

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! :)

回答1:

So if anyone wants to use jQuery tool tooltip:

If the tooltip is wrapped in a 'position:absolute' or 'position:fixed' container, supply 'relative:true' with the ini configurations.
In this case, don't add any margin to the trigger of the tooltip

回答2:

I've made you a little fiddle, which "kindda" solves your problem.

In this fiddle, the tooltip gets places beneath your trigger, but it takes x number of "hovers" to get it 100% correctly placed. I'm thinking this is caused by some (mal)function in the tooltip library.

Here's the fiddle: http://jsfiddle.net/Gjw74/1/

And the modified 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') 
        });
    }
 });

来源：https://stackoverflow.com/questions/8355429/jquery-tools-tooltip-position-with-absolute-margin

标签

jquery

tooltip

jquery-tools