1

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

我有一张桌子，在发出各种 ajax 请求时会定期更换。当光标悬停在<td>该列中的 a 上时，我希望 qtip 显示在表格中特定列的顶部。为了实现这一点，我使用$('body').on(...)了作为选择器的方法，然后通过类分配<th>将“show.target”的选择器设置为相关。<td>

除了两点之外，我已经让它工作了：

  • 在我将鼠标悬停<th>在至少一次之前，不会创建 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 回答