1

私が開発している管理パネルのいくつかのボタンの簡単なツールチップを作成しました。ユーザーがホバーしたときにツールチップをボタンのすぐ上に配置するために、かなり標準的な JQuery コードを使用しています。ただし、スクロールバーが存在する場合と存在しない場合の配置の問題があるようです。

スクロールバーがあると、ツールチップが正しい場所に表示されます...

ここに画像の説明を入力

スクロールバーを表示するのに十分なコンテンツがない場合、スクロールバーの幅だけツールトップがずれて表示されます...

ここに画像の説明を入力

offset().left を使用しているため、奇妙に思えます。これは、ページの幅の影響を受けるべきではありません。これが私が使用しているコードです...

var ttl;
var tt;
$('.icon').mouseover(function (e) {
    ttl = $(this).attr('title');
    $(this).attr('title', '');

    $('body').append('' +
        '<div id="tt" class="tt">' +
        '   <div class="tttxt">' +
        '   ' + ttl +
        '   </div>' +
        '   <div class="ttnib">&nbsp;</div>' +
        '</div>');
    tt = $('#tt');

    var y = $(this).offset().top - tt.outerHeight();
    var x = $(this).offset().left - (tt.outerWidth() - $(this).outerWidth()) / 2;
    tt.css('left', x + 'px').css('top', y + 'px');
});
$('.icon').mouseout(function () {
    $(this).attr('title', ttl);
    tt.remove();
});

どんな助けでも大歓迎です。

4

1 に答える 1

2

わかりましたので、私はこの仕事をすることになりました。もともと、ツールチップを body タグに追加していました。ラッパー div を追加してそれに追加すると、ツールチップはスクロールバーの有無にかかわらず正しく配置されます。体に追加するとシフトが発生する理由はわかりませんが、少なくとも機能するようになりました。

アップデート：

これを投稿した直後に、真犯人を見つけました。ラッパー DIV (およびその他の要素: HTML、FORM) の高さは 100% です。それを削除した後、すべてが修正されました。私はそのように高さを投げるよりもよく知っていますが、私は効果を求めていました. しかたがない。

于 2012-06-21T19:06:00.473 に答える