0

ツールチップをリンクの下の中央に適切に配置する方法を見つけようとしています (したがって、リンクに沿って配置されません)。

                   [Link]
      [tooltip should appear like this]

                   [Link]
                   [tooltip should not appear like this]

また、ツールチップがフェードインしない理由を理解しようとしています。

http://jsfiddle.net/fj4xz/

4

1 に答える 1

1

そこには ：

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

コードを読みやすくすることはできますが、アイデアはそこにあります ;)

[編集] コードが変更されました。テキストが長すぎても中央に配置する必要があります。(質問を読み間違えました)

于 2012-06-05T00:53:44.160 に答える