qTip2 | jQuery具有不同目標的“ on”方法

Question

我正在使用非常方便的qTip2庫 。

我有一張桌子，經常在發出各種ajax請求時被替換。 當光標懸停在該列中的<td>時，我希望qtip顯示在表中特定列的頂部。 為此，我使用了$('body').on(...)方法，將<th>用作選擇器，然后將“ show.target”的選擇器設置為相關的<td>課堂作業。

我得到了2點優勢：

• 在我至少將鼠標懸停在<th>上之前，不會創建qtip
• 當我將鼠標懸停在<td> ，一旦qtip顯示出來，它就會隱藏起來，直到我將鼠標懸停並離開<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/

任何指針歡迎。

謝謝李

Answer 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：事件可能可以修復。