jquery 工具提示代码每次都必须这样做

Question

我为 html 工具提示找到的每个插件或代码都有一个问题，我需要一个解决方法，它们总是有需要在触发器附近显示的内容，但我不想要那个，我想要一个包含所有选项的列表可以触发，然后只在那个时候调用我想要的任何东西。

我为什么要这个？我希望每次粘贴一张图片时它都会显示该图片的工具提示，而不需要 <span>包含工具提示将显示的所有信息。

我希望我是清楚的:\

编辑:是的，我试图将工具提示(或 div)放在触发器之外，但它不起作用。

编辑2:

<a href="#" class="tip_trigger">Your Link Key Word <span class="tip">This will show up in the tooltip</span></a>

大多数工具提示都以某种方式像上面那样工作，使用内容作为工具提示或标题。对于上面的示例，我想要的是类似这样的内容。

分离所有可能的工具提示:

<span class="tip">This will show up in the tooltip</span>

然后在代码中:

<a href="#" class="trigger_tip">Your Link Key Word</a>

是这样的。我希望我现在清楚了

我需要的是这样的: http://jsfiddle.net/MMcHs/1/

但是不知何故在 worldpress 上 html 没有被很好地加载

Answer 1

您可以像您在示例中提到的那样存储工具提示，并使用 jquery 动态添加 jquery ui 所需的标题..

http://jsfiddle.net/MMcHs/

以 jquery ui 工具提示为例..

HTML

<p><a href="#" id="anchor_tip">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" id="anchor_tip2">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p>
    <label for="age">Your age:</label>
    <input id="age" />
</p>
<p>Hover the field to see the tooltip.</p>
<div class="myToolTip" data-tip-id="#anchor_tip">
     <h1>Heading 1 in the tooltip</h1>

    <p>That's what this widget is</p>
</div>
<div class="myToolTip" data-tip-id="#anchor_tip2">ThemeRoller: jQuery UI's theme builder application</div>
<div class="myToolTip" data-tip-id="#age">We ask for your age only for statistical purposes.</div>

JS

$(function () {
    $(".myToolTip").each(function () {
        $($(this).attr('data-tip-id')).attr('title', $(this).html());
    });
    $(document).tooltip();
});

CSS

  label {
      display: inline-block;
      width: 5em;
  }
  .myToolTip {
      display: none;
  }