jquery UI Tooltipで独自のクラスを指定してスタイルを設定する

ツールチップごとに異なるスタイルを指定したい時は、”tooltipClass”オプションで追加したいクラスを指定するといい。

sample.js

$(function() {
    $(".test1").tooltip({
        tooltipClass:"ui-tooltip1"
    });
    $(".test2").tooltip({
        tooltipClass:"ui-tooltip2"
    });    
     $(".test3").tooltip({
        tooltipClass:"ui-tooltip3"
    });
     $("#test").tooltip({
        tooltipClass:"ui-tooltip-test"
    });
});

sample.html

<p>これは<a class="test1" href="#" title="てすと１">ツールチップのテスト</a>です。ツールチップごとに異なるスタイルを指定しています。</p>
<p>これは<a class="test2" href="#" title="てすと２">ツールチップのテスト</a>です。ツールチップごとに異なるスタイルを指定しています。</p>
<p>これは<a class="test3" href="#" title="てすと３">ツールチップのテスト</a>です。ツールチップごとに異なるスタイルを指定しています。</p>

<p>共通のstyleは".ui-tooltip"クラスで指定しています。</p>
<p><label for="test">test:</label><input id="test" title="test" /></p>
<p>リンクやフィールドをマウスオーバーするとツールチップが表示されます。</p>

sample.css

.ui-tooltip{background: #F2FBEF}

.ui-tooltip1{color:red;}
.ui-tooltip2{font-style: italic;}
.ui-tooltip3{font-weight:borld;}
.ui-tooltip-test{background:red;color:white;}

サンプル（jsfiddle）：
https://jsfiddle.net/cuf0cunj/