Question

I’m trying to figure out how to properly center a tooltip under a link (so it’s not positioned in line with the link).

                   [Link]
      [tooltip should appear like this]

                   [Link]
                   [tooltip should not appear like this]

I’m also trying to figure out why my tooltip is not fading in.

http://jsfiddle.net/fj4xz/

Answer 1

There :

$('a.tooltip').hover(function() {
    var title = $(this).attr('title');
    var offset=$(this).offset();
    var width=$(this).outerWidth();
    var height=$(this).outerHeight();
    $content=$('<div class="tooltip">' + title + '</div>').fadeIn();
    $(this).append($content);
    var middle = offset.left+(width-$content.outerWidth())/2;
    // middle = Math.max(offset.left,offset.left+(width-$content.outerWidth())/2 );
    $content.offset({ top: offset.top+height, left: middle });
    $('div.tooltip').hover(function() {
        $(this).fadeOut('fast');            
    });
}, function() {
    $(this).find('div').fadeOut('fast');
});

​
You can make the code more readable, but the idea is there 😉

[EDIT] Code changed, the text has to be centered even if it is too long. (I misread the question)