Question

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

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

我希望我很清楚：\

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

Edit2：

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

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

1 个答案: