4

ajax ベースの Web サイトで jquery ui 1.9 を使用しています。

次のコードがあります。

This is a <span title="Some warning" class="warning">warning</span> message<br />
This is a <span title="Some info" class="info">info</span> message

動的コンテンツの場合でも、jquery ui ツールチップを使用すると機能します。

$(function() {
    $( document ).tooltip();
});

しかし、このメッセージ タイプごとに異なるツールチップ スタイルが必要です。たとえば、警告は赤色、情報は青色で、動的コンテンツでも機能するはずです。

何か案は？

4

2 に答える 2

13

css クラスを指定するには、 toolTipClassプロパティを使用する必要があります。

$(document).ready(function() {
    $( ".warning" ).tooltip({
        tooltipClass: "warning-tooltip"
    });
    $( ".info" ).tooltip({
        tooltipClass: "info-tooltip"
    });  
});
于 2013-03-23T19:10:52.277 に答える
7

まず、動作するコードは次のとおりです。

$(function() {
    $('#warning-binder-element').tooltip({
        items: '.warning',
        tooltipClass: 'warning-tooltip',
        content: function () {
            return $(this).prev('.warning-toast').html();
        },
        position: {
            my: "right bottom",
            at: "right top-10"
        }
    });

    $('#info-binder-element').tooltip({
        items: '.info',
        tooltipClass: 'info-tooltip',
        content: function () {
            return $(this).closest('.doo-hicky').next('.info-toast').html();
        },
        position: {
            my: "left bottom",
            at: "left+10 top-10"
        }
    });  
});

上記に関するいくつかの注意事項：

  • セレクター.tooltip()は、ツールチップをポップアップさせたいアイテムではなく、ツールチップ オブジェクトとそれに関連するイベントがバインドされているページ上の要素です。
  • 2 つのツールチップを同じオブジェクトにバインドしようとすると、最後の 1 つだけが保持されるため、両方をバインドする$(document)ことはできません (これが、2 つの異なるツールチップ オブジェクトをページ上の 2 つの異なる要素にバインドした理由です)。
  • ツールチップを取得する項目にツールチップ オブジェクトをバインドできますが、クラス セレクターを使用すると、悪影響が生じる可能性があります。
于 2013-09-24T19:54:00.657 に答える