Using a jquery tooltip more than once on the same page

Question

I am using a jquery tooltip on an asp.net repeater element.

<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();
        }
    });
    });

I now have to implement a help functionality. There should be a help icon and on clicking on the icon a popup should open up with instructions , I would like to use the jquery tooltip again. I do not know how to implement it this time ,should I include it in the same $function() above or should I use another function ?

If anyone has any idea please let me know..

Answer 1

The way you've written it, you shouldn't have to do any more JavaScript. Any <h5> element that has a sibling with the tooltip class will be activated. All you have to do is put a .tooltip div next to the thing that's supposed to activate it. Example:

<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>

If you want tooltips to work for elements other than h5 , modify the items option:

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

Make sure each trigger/tooltip pair are siblings, and make sure you have some type of wrapper around each pair to show which tooltip goes with which element. For example, this will NOT work properly:

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

Neither will this:

<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>