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.
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)
