7

HTML5 データ属性を使用して、ツールチップのコンテンツを保存および表示しようとしています。

ツールチップに JQuery UI を使用しています。

ドキュメントを読みましたが、適切なセレクターをプログラムしてカスタム データを表示する方法がわかりません。

私が見逃しているもののアイデアはありますか？

http://jsfiddle.net/QsEJk/2/

HTML:

<span class="info-icon"
    data-title="custom title"
    data-desc="custom description">
</span>

JS:

$( '.info-icon' ).tooltip({
    content: function() {
        return 'Title: ' + $( this ).data('title') +
               ' Description: ' + $( this ).data('desc');
    }
});
4

2 に答える 2

2

受け入れられた答えは私にとってはうまくいきましたが、私の場合、これをページ上の多くのアイテムに適用したかったので、すべてのアイテムに変数は必要ありませんでした。代わりにこれを使用しました：

        $(".help").each(function() {
            $(this).tooltip({
                content: $(this).data('help')
            });
        });

これにより、ページ上のすべての .help アイテムにデータ ヘルプ コンテンツが適用されます。

于 2014-01-25T09:31:26.323 に答える