QTip2多個元素，相同的工具提示

Question

我有一個頁面，我在其中動態創建需要工具提示的元素。

我已經嘗試了幾種不同的方法，並在網上查找一些無效的答案。

截至目前，我有這樣的：

var $links = $('a.link'); 
var len = $links.length; 
for(var i = 0; i < len; i++){ 
    var $ele = $($links[i]); 
    $ele.qtip({ 
     id: 'editLink', 
     overwrite: false, 
     content: { 
      text: $linkEditor, 
      title: { 
       text: 'Edit Link', 
       button: true 
      } 
     }, 
     position: { 
      my: 'top center', 
      at: 'bottom center', 
      viewport: $(window) 
     }, 
     show: { 
      event: 'mouseover', 
      solo: true 
     }, 
     hide: false, 
     style: {classes: 'ui-tooltip-shadow ui-tooltip-red'} 
    }); 
} 

我正在尋找一些方法來擁有所有這些元素的使用完全相同的工具提示。我希望他們都使用完全相同的內容（在本例中爲單一表單），並以完全相同的方式引用工具提示（通過id爲'ui-tooltip-editLink'的工具提示元素）。

與我所擁有的，它目前創建正確的第一個工具提示，但如果我添加一個新的元素並重新分配工具提示，它創建一個全新的工具提示與新的元素不同的id。

有誰知道完成多個元素，相同的工具提示方法的一些方法？

Answer 1

爲了在動態創建的元素中使用qtip，您需要在元素初始化期間包含qtip。

例如

$('<div style="top:0px; left:0px; position:absolute;">abc123</div>').appendTo("body").qtip({content: "test"}); 

Answer 2

不幸的是，看起來我們需要克隆每個懸停/點擊元素的Tooltip元素。

克雷格提到這在GitHub的問題：https://github.com/Craga89/qTip2/issues/173

Answer 3

我已經想通了如何有一個提示的div許多提示圖像共享，如果有人發現了它方便

$(".tooltipBearing").qtip({ 
          content: { 
           text: $("#tooltipDiv").html() 
          }   
         }); 

如果您不能把.html（）放在那裏，你會看到共享工具提示出現一次，然後當你從另一個圖像激活它時，它將不再工作的第一個...

tooltipBearing是在頁面中的一些圖像上設置的類。

tooltipDiv是包含您的工具提示內容的div的ID。

Answer 4

這就是我所做的。我將我的工具提示附加到了一個獨特的元素上。然後我的所有其他元素的需要相同提示只會觸發獨特元素的工具提示顯示：

$('#unique-element').qtip({ 
    content: {text: 'My Tooltip'}, 
}); 

$('.other-elements').click(function(){ 
    $('#unique-element').qtip('show'); 
}); 

然而，所有的工具提示將顯示在一個固定的位置。這在我的情況中不是問題，因爲我使用工具提示作爲模式。您將不得不通過cutom event方法管理工具提示位置。

Answer 5

基於the answer of user738048，我的工作的解決方案是這樣的：

$('[data-tooltipid]').each(function() { 
    var ttid = $(this).data('tooltipid'); 
    $(this).qtip({ 
     content: { 
      text: $('#'+ttid).html(), 
     }, 
     position: { 
      my: 'top left', 
      at: 'bottom left', 
      target: $(this) 
     } 
    }).removeAttr('href').removeAttr('onclick'); 
}); 

在我的情況，包含文本的HTML元素的id從data-tooltipid屬性截取;我的href和onclick屬性被刪除，因爲它們被工具提示廢棄。