使用jQuery工具指定動態工具提示

Question

我正在嘗試使用jQuery工具來動態設置一些工具提示，但我遇到了很大的麻煩。

默認情況下，當你安裝一個提示，在它的使用jQuery的工具，將採取提示觸發爲實際提示之後的下一個元素最基本的形式。

$("#someElement").tooltip(); 

在我正在處理的當前應用程序中，我有一個鏈接，我需要加載不是下一個元素的工具提示。

使用jQuery工具可以使用這樣做：

$("#someElement").tooltip({tip: '#tooltipElement'}); 

這是偉大的，但我需要能夠動態設置提示，我似乎不能夠做。

對我有聯繫安裝的應用程序是這樣的：

<a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-1">Quick Preview</a> 
<a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-2">Quick Preview</a> 
<a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-3">Quick Preview</a>... 

工具提示然後在頁面像這樣的底部：

<div id="tooltip-1">Some random content here!</div> 
<div id="tooltip-1">Some random content here!</div> 
<div id="tooltip-1">Some random content here!</div>... 

所以，我再試着這樣做對使這項工作是：

$(".tooltip-preview").tooltip({tip: $(this).attr("data-tooltip-id")}); 

我有一種感覺，這是行不通的，因爲$（this）不是我們編輯爲$（「。tooltip-preview」）對象。如果是這種情況，我該如何解決這個問題？

反而會發生什麼是每條鏈路上的下一個元素被用作提示。

Answer 1

這爲我工作：

$(".tooltip-preview").each(function(){ 
    $(this).tooltip({tip: $(this).attr("data-tooltip-id")});    
}); 

這個回答假設在此塊：

<div id="tooltip-1">Some random content here!</div> 
<div id="tooltip-1">Some random content here!</div> 
<div id="tooltip-1">Some random content here!</div>... 

您的意思這（增加ID值的關鍵點在這裏請注意，我還區分隨機內容）：

<div id="tooltip-1">Some random content here! (1)</div> 
<div id="tooltip-2">Some random content here! (2)</div> 
<div id="tooltip-3">Some random content here! (3)</div>... 

我能夠複製這個問題，起初我試過：

$(".tooltip-preview").tooltip({tip: $(".tooltip-preview").attr("data-tooltip-id")}); 

讓你更接近，但它使所有三個工具提示「一些隨機內容在這裏！ （1）」，因爲該選擇僅找到與屬性的第一個元素‘數據提示-ID’。

所以，你必須通過元件進行迭代，如上所述。