このサンプルは、jQueryの
mopTip
プラグインを利用してリンクのツールチップを表示します。マウスを1番目のリンクに移動するとoverOut型のツールチップが表示されます。2番目のリンクにマウスを移動sるうとoverClick型のツールチップを表示します。2番目のツールチップは[X]をクリックして手動で閉じます。
ツールチップは、CSSのdisplayプロパティに「none」を設定して非表示の状態で定義します。
$('#demo1').mopTip({ w: 150, style: 'overOut', get: '#tipDemo1' });
$('#demo2').mopTip({ w: 150, style: 'overClick', get: '#tipDemo2' });
<div class="hidden">
<div id="tipDemo1">demo1(overOut) txt txt txt txt txt txt txt</div>
<div id="tipDemo2">demo2(overClick) txt txt txt txt txt txt txt</div>
</div>