在同一頁面上多次使用jquery工具提示

Question

我在一個asp.net repeater元素上使用jQuery工具提示。

<div class="tooltip" style="display: none"> 
<div style="text-align: center; font-weight: bold;"> 
<%# Eval("Name") %><br /> 
</div> 
</div> 


$(function() { 
    var du = 1000; 
    var tooltip; 
    $(document).tooltip({ 
     show:{effect:'slideDown'}, 
      items: "h5", 
      content: function() { 
       tooltip = $(this).siblings('.tooltip'); 
       return tooltip.html(); 
     } 
    }); 
    }); 

我現在必須實現一個幫助功能。應該有一個幫助圖標，並點擊 圖標彈出窗口應該打開指示，我想再次使用jQuery工具提示。 這次我不知道如何實現它，我應該將它包含在上面的$ function（）還是 中我應該使用另一個函數嗎？

如果任何人有任何想法，請讓我知道..

Answer 1

你寫它的方式，你不應該做任何更多的JavaScript。任何具有tooltip類的兄弟元素的<h5>元素都將被激活。你所要做的就是把.tooltip div放在應該激活它的東西旁邊。例如：

<ul> 
<li> 
    <h5>Here is thing 1.</h5> 
    <div class="tooltip" style="display: none">This is tooltip 1.</div> 
</li> 
<li> 
    <h5>Here is thing 2.</h5> 
    <div class="tooltip" style="display: none">This is tooltip 2.</div> 
</li> 
</ul> 

如果您想提示爲比h5其他元素的工作，修改items選項：

items: "h5, img.help-icon", 

確保每個觸發器/提示對是兄弟姐妹，並確保你有一些類型每一對的包裝，以顯示哪個工具提示與哪個元素相關。例如，這將不正常工作：

<li> 
    <div> 
    <h5>Here is thing 1.</h5> 
    </div> 
    <div class="tooltip" style="display: none">This won't show up at all!</div> 
</li> 

都不會對這樣的：

<li> 
    <h5>Here is thing 1.</h5> 
    <div class="tooltip" style="display: none">This will be the text for both tooltips!</div> 

    <h5>Here is thing 2.</h5> 
    <div class="tooltip" style="display: none">This won't show up at all!</div> 
</li>