在同一页面上多次使用 jquery 工具提示答案

【问题标题】：Using a jquery tooltip more than once on the same page在同一页面上多次使用 jquery 工具提示
【发布时间】：2013-09-24 16:01:45
【问题描述】：

我在 asp.net 转发器元素上使用 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()中还是我应该使用其他功能吗？

如果有人有任何想法，请告诉我..

【问题讨论】：

标签： c# javascript jquery asp.net jquery-ui

【解决方案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>

【讨论】：