jquery qtip没有在正确的地方显示独特的工具提示答案

【问题标题】：jquery qtip not showing unique tooltips in the right placesjquery qtip没有在正确的地方显示独特的工具提示
【发布时间】：2011-05-08 04:42:43
【问题描述】：

我有一张桌子。在每个表格中，当有人将鼠标悬停在 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>joe@gmail.com</td>
<td>123 fake street</td>
</tr>

<tr class="contacttr">
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td>
<td>joe@gmail.com</td>
<td>123 fake street</td>
</tr>

<tr class="contacttr">
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td>
<td>joe@gmail.com</td>
<td>123 fake street</td>
</tr>

问题是工具提示只显示在第一行，它显示了所有contactinfo div中的内容，而不仅仅是悬停在行中的内容。

【问题讨论】：

标签： jquery qtip

【解决方案1】：

我认为你的问题是这些：

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

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

最简单的解决方案是将您的 qTip 绑定包装在 .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 将是您在评估$this.find('.contactinfo') 和$this.find('.contactname') 时希望它成为的<tr>。

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

【讨论】：

【解决方案2】：

这里：http://jsfiddle.net/5hY8F/

您需要使用each()，否则参数将无法访问属性。

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

【讨论】：