Question

我有一张桌子。在每个表格中，我希望当有人将鼠标悬停在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内的内容，而不仅仅是正在悬停的行内部的内容。

Answer 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和<tr>时，$this.find('.contactinfo')将成为您希望的$this.find('.contactname')。

您可以使用callbacks动态构建工具提示，但我对qTip不太熟悉，不知道它有多好用。

Answer 2

此处：http://jsfiddle.net/5hY8F/

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

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

jquery qtip没有在正确的位置显示唯一的工具提示

2 个答案: