Jquery Tooltip Position

I have been working on a simple tool tip (see fiddle below), but am having some positioning problems. I would like the tip to appear centered and above the link that is clicked. At

Solution 1:

Check out the changes at http://jsfiddle.net/CBf4C/3/

You need to get the position of the clicked element (use .position()), get the dimensions of the tooltip with .outerWidth() and .outerHeight() and then calculate based on these..

the actual code is

$('a[title]').click(function(e) {

    //fadetooltip and display information
    $('body').append('<div class="tooltip"><div class="tipBody"></div></div>');
    tip = $(this).attr('title');
    var tooltip = $('.tooltip'); // store a reference to the tooltip to use it later
    tooltip.fadeTo(300, 0.9).children('.tipBody').html( tip );


    // calculate position of tooltipvar el = $(this),
        pos = el.position(), // get position of clicked element
        w = el.outerWidth(), // get width of clicked element, to find its center
        newtop = pos.top - tooltip.outerHeight() , // calculate top position of tooltip
        newleft = pos.left + (w/2) - (tooltip.outerWidth()/2); // calculate left position of tooltip//set position
    $('.tooltip').css('left', newleft )  ;
    $('.tooltip').css('top',  newtop );

    hideTip = false;
});

Solution 2:

http://jsfiddle.net/CBf4C/15/ - see this.

Solution 3:

See the changes I've made here: http://jsfiddle.net/CBf4C/9/