JQuery工具提示位置

Question

我一直在研究一個簡單的工具提示（請參閱下面的提琴），但我有一些定位問題。我希望提示能夠顯示在被點擊的鏈接的上方和上方。此時左上角位於鼠標點擊位置。我試圖通過一半的工具提示來抵消這個位置，但沒有成功。

http://jsfiddle.net/Ricco/CBf4C/

Answer 1

退房在http://jsfiddle.net/CBf4C/3/

的變化你需要獲得點擊的元素（使用.position()）的位置，與.outerWidth()和.outerHeight()得到提示的尺寸，然後計算基礎在這些..

實際代碼是

$('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 tooltip 
    var 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; 
}); 

Answer 2

見我在這裏所做的更改：http://jsfiddle.net/CBf4C/9/

Answer 3

http://jsfiddle.net/CBf4C/15/ - 看到這一點。