jquery qtip 未在正确的位置显示独特的工具提示

Question

我有一张 table 。在每个表中，当有人将鼠标悬停在 TR 上时，我希望它通过 qtip 显示工具提示。

这是我的 jquery 代码:

    $('.contacttr').qtip({

    content: {
        text: $(this).find('.contactinfo')
    },
    position: {
        my: 'bottom center',
        at: 'center',
        target: $(this).find('.contactname')
    }

})

这是我的 html:

<tr class="contacttr">
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td>
<td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2888d87a2858f838b8ecc818d8f" rel="noreferrer noopener nofollow">[email protected]</a></td>
<td>123 fake street</td>
</tr>

<tr class="contacttr">
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td>
<td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="016b6e6441666c60686d2f626e6c" rel="noreferrer noopener nofollow">[email protected]</a></td>
<td>123 fake street</td>
</tr>

<tr class="contacttr">
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td>
<td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="472d282207202a262e2b6924282a" rel="noreferrer noopener nofollow">[email protected]</a></td>
<td>123 fake street</td>
</tr>

问题是工具提示仅显示在顶行，并且它显示所有 contactinfo div 内的内容，而不仅仅是悬停在行内的内容。

Answer 1

我认为你的问题是:

text: $(this).find('.contactinfo')
// ...
target: $(this).find('.contactname')

当您调用$('.contacttr').qtip()时正在评估而不是当 qTip 激活时。所以，this不会是<tr>和.find不会找到您期望的单个元素。

最简单的解决方案是将 qTip 绑定(bind)包装在 .each 中:

$('.contacttr').each(function() {
    var $this = $(this);
    $this.qtip({
        content: {
            text: $this.find('.contactinfo')
        },
        position: {
            my: 'bottom center',
            at: 'center',
            target: $this.find('.contactname')
        }
    });
});

然后this将是<tr>当您评估 $this.find('.contactinfo') 时您希望它成为和$this.find('.contactname') .

您也许可以使用 callbacks动态构建工具提示，但我对 qTip 不太熟悉，不知道它的效果如何。