1

私は非常に便利なqTip2 ライブラリを使用しています。

さまざまな ajax リクエストを行うときに定期的に交換されるテーブルがあります。カーソルが<td>その列の a の上にあるときに、テーブルの特定の列の上部に qtip を表示したいと思います。これを実現するために、セレクターとして$('body').on(...)メソッドを使用し<th>、「show.target」のセレクターを<td>クラス割り当てを介して関連するものに設定しました。

私はそれを2つのポイントから離れて動作させました:

  • <th>少なくとも 1 回カーソルを合わせるまで、qtip は作成されません
  • にカーソルを合わせたときに qtip が表示されると、カーソル<td>を置いてから離れるまで非表示になりません。<th>

コードは次のとおりです。

// Create the tooltips only when document ready
$(document).ready(function () {

    var timeOut = setTimeout(function () {
        var tableHtml = '<table><tr><th>Col 1</th><th class="col-2-header">Col 2</th></tr><tr><td>Row Label 1</td><td class="col-2">Val 1</td></tr><tr><td>Row Label 2</td><td class="col-2">Val 2</td></tr><tr><td>Row Label 3</td><td class="col-2">Val 3</td></tr></table>';
        $('body').append(tableHtml);
    }, 100);

    $("body").on("mouseover", '.col-2-header', function (e) {
        $(this).qtip({
            overwrite: false,
            position: {
                my: 'bottom center',
                at: 'top center',
                viewport: $(window)
            },
            content: 'Some test content...',
            show: {
                event: e.type,
                ready: true,
                target: $('td.col-2')
            }
        }, e);
    });

});

http://jsfiddle.net/fDavN/6106/

どんなポインタも歓迎します。

ありがとう、リー

4

1 に答える 1

1

あなたの qTip 定義にいくつかの変更を加えました。ヘッダーに対して .on を実行する代わりに、.col-2 クラス (ヘッダーにもそのクラスを指定) を使用して実行し、ヘッダー列の位置ターゲットを設定します。

新しい jsFiddle

// Create the tooltips only when document ready
$(document).ready(function () {

    var timeOut = setTimeout(function () {
        var tableHtml = '<table><tr><th>Col 1</th><th class="col-2-header col-2">Col 2</th></tr><tr><td>Row Label 1</td><td class="col-2">Val 1</td></tr><tr><td>Row Label 2</td><td class="col-2">Val 2</td></tr><tr><td>Row Label 3</td><td class="col-2">Val 3</td></tr></table>';
        $('body').append(tableHtml);
    }, 100);

    $("body").on("mouseover", '.col-2', function (e) {
        $(this).qtip({
            overwrite: false,
            position: {
                my: 'bottom center',
                at: 'top center',
                viewport: $(window),
                target: $(".col-2-header")
            },
            content: 'Some test content...',
            show: {
                event: e.type,
                ready: true
            }
        }, e);
    });

});

編集：セル間でマウスを移動するとqTipが再作成されるため、これは部分的な修正のようです。hide: イベントで遊ぶことで修正できるかもしれません。

于 2013-05-07T14:45:15.813 に答える