0

まず、これは私が得たものです：

        $('div.pickup').load('/pages/pickup.php?pickup=' + pickup, function() {

            $('div.pickup').fadeIn(300);

            var box = $('#tooltip');
            var trigger = $('.tip');

            trigger.hover(function(e) { 
                alert('Showing tooltip with text: ' + $(this).attr('title'));
                box.text($(this).attr('title'));
                box.css({
                    'top': (e.pageY - 10) + 'px',
                    'left': (e.pageX + 20) + 'px'
                }).fadeIn(300);
            }, function() {
                box.hide();
            });

            trigger.mousemove(function(e) {
                box.css({
                    'top': (e.pageY - 10) + 'px',
                    'left': (e.pageX + 20) + 'px'
                });
            });

        });

テーブル ヘッダーには、という名前の「トリガー クラス」.tipが含まれています。そのクラスを持つすべての要素は、ホバー時にツールチップを開始する必要があります。-classを含むthは次の.tipようになります。

<th class="type red b_l b_b tip" title="test">T</th>

<th>を含む要素をホバリングすると、マウス カーソルの近くにツールチップが表示されると思っていましたがclass="tip"、ホバー イベントが発生しましたが、 alert()呼び出しからのダイアログ ボックスしか表示されませんでした。

#tooltipdiv 要素は、PHPファイルの1 行にすぎません。<div id="tooltip"></div>

CSS:

#tooltip {
    display: none;
    position: absolute;
    z-index: 1;
    background-color: #ffffff;
    border: 1px solid #000000;
    padding: 3px;
    font-family: Consolas, monaco, monospace;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    box-shadow: 0px 3px 4px #000000;
}

ツールチップが別の要素の後ろに隠れていないことは確かです（つまり、)、手動で設定され#tooltipた唯一の要素です。z-index私も試してみz-index: 999ました。

私は何を間違っていますか？

  • 最新の IE および FF バージョンでテスト済み
4

2 に答える 2

0

申し訳ありませんが、コメントできないため、答えを出さなければなりません。FF の開発者ツールでツール ヒントを見つけることができますか? ツールチップの場所が強調表示され、JS コンソールを介して可視性を確認および設定できるはずです。

于 2013-08-01T13:56:42.810 に答える