2

ホバー時にツールチップ (.tooltip 関数が呼び出されたアンカー要素のタイトル) を表示するこの素晴らしいツールチップを使用しています。今回はクリックで表示させたいので、こうしました。

$(document).ready(function(){

    $(".icons a.tooltips").click(function() {
        return $($(this).attr("href")).html().easyTooltip();

        // Prevent the browser jump to the link anchor
        e.preventDefault();
    });
});

このための html は次のとおりです。

<div class="foo">
    <a class="bar" title="Lorem ipsum" href="#"></a>
    <a class="bar" title="meaningless text" href="#"></a>
    <a class="bar" title="more meaningless text" href="#"></a>
    <a class="bar" title="even more meaningless text" href="#"></a>
</div>
4

2 に答える 2

2

デフォルトでは、easyTooltip は hover イベントを使用して、ツールチップを表示するか非表示にするかを決定します。この動作は、プラグインのソースを介してのみ変更できます。幸いなことに、以下のデモでわかるように、これは非常に簡単です。私が行ったことは、基本的にツールチップのトリガーをホバーからクリックに変更することですが、残りの動作 (およびコード) は以前とまったく同じに保ちます。

デモでは、プラグイン コードも埋め込まれています。プラグイン コードの変更を指摘するために追加したコメントに注意してください。

更新されたデモ: http://jsfiddle.net/techfoobar/FhLLA/2/

于 2012-07-20T11:59:48.560 に答える
1

easytooltip 関数は、ツールチップを開始するためにのみ必要です。この関数を呼び出す必要があるのは 1 回だけです。

$(document).ready(function(){   
    $("foo a.bar").easyTooltip();
});

これにより、マウスオーバー時にツールチップが表示されます。

クリック時にのみ起動するように変更する場合は、このプラグインのスクリプトを変更するか、別のスクリプトを見つける必要があります。

jquery イベントを指定してツールチップを表示できる jquery プラグインの例: http://craigsworks.com/projects/qtip/docs/reference/#show

于 2012-07-20T11:39:46.773 に答える