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

我有一张桌子。在每个表格中，我希望当某人悬停在TR上时，它通过qtip显示工具提示。jquery 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>[email protected]</td> 
<td>123 fake street</td> 
</tr> 

<tr class="contacttr"> 
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td> 
<td>[email protected]</td> 
<td>123 fake street</td> 
</tr> 

<tr class="contacttr"> 
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td> 
<td>[email protected]</td> 
<td>123 fake street</td> 
</tr>

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

来源

2011-05-07 scarhand

请设置一个jsfiddle – davin 2011-05-07 20:37:37

我觉得你的问题是这些：

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不够熟悉，无法知道该功能如何工作。

来源

2011-05-07 20:39:16

做到了这一点。你摇滚！ – scarhand 2011-05-07 20:41:04

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

您需要使用each()或参数将无法访问的属性。

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

来源

2011-05-07 20:42:43 ariel

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

回答

相关问题