javascript - 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/15/-これを参照してください。

Answer 3

ここで行った変更を参照してください：http：//jsfiddle.net/CBf4C/9/