シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラグイン「Tooltipster」をご紹介します。特定のクラス名を与えることで簡単にツールチップを作成することができるのでとても便利ですね。以下、使い方です。
[ads_center]
使い方
使い方はとてもシンプルです。jQuery本体とプラグインを読み込みます。
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
Tooltipsterをセットします。
<script>
$(document).ready(function() {
$('.tooltip').tooltipster();
});
</script>
HTMLのマークアップではtooltipというクラス名を与えます。表示させたいテキストはtitle属性に記述していきます。
<img src="sample.png" class="tooltip" title="サンプルテキスト" />
とてもシンプルで使いやすいですね。
divで括ったりもすることができます。
<div class="tooltip" title="サンプルテキスト">
<p>サンプルテキスト</p>
</div>
また、CSSでテーマをカスタマイズすることもできたり、オプションも色々あるので詳しくは公式サイトでご確認ください。
サポートされているブラウザはChrome、Safari、Opera、FireFox、IE10・9、IE8 + Graceful Degradation（グレイスフル デグラデーション）とのことです。
Tooltipster
