0

我为 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没有被很好地加载

4

1 回答 1

0

您可以像在示例中提到的那样存储工具提示，并使用 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;
  }
于 2013-06-12T21:12:16.973 回答