0

HTMLツールチップ用に見つけたすべてのプラグインまたはコードには、回避策が必要な問題が1つあります。トリガーの近くに表示する必要があるコンテンツが常にあり、それは望ましくありません。可能なすべてのオプションのリストが必要ですトリガーされ、その時点で必要なものだけを呼び出します。

なぜ私はこれが欲しいのですか？1 つの画像を貼り付けるたびに、その画像<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/

しかし、どういうわけかワールドプレスでは、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 に答える