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沒有在正確的位置顯示唯一的工具提示

回答

相關問題