汎用的で軽量なツールチップ実装jQueryプラグイン・Tooltipster

使い勝手の良さそうなプラグイン
だったので備忘録的にご紹介。
ツールチップを実装するjQuery
のプラグインです。マウス追従、
不動タイプの選択が可能、デザ
インもCSSのみで作ります。

各ブラウザにも対応、HTMLタグも利用可能、マウス追従の有無の選択、軽量、などの特徴が有ります。

Sample

動作サンプルです。

マウス追従への変更も可能です。圧縮版で5KBほどとなかなか軽量です。

コード

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tooltipster.min.js"></script>

本体とプラグインを読み込み。

$('.foo').tooltipster();

セレクタを指定してツールチップを表示させたい要素にtitle属性で表示したいテキストを加えます。

$('.foo').tooltipster({
    animation: 'slide',				// アニメーションの設定
    arrow: true,				// 吹き出しの▼部分の有無
    arrowColor: '',				// ▼部分の色
    delay: 200, 				// マウスを乗せてから表示するまでの待ち時間
    fixedWidth: 400,				// 幅
    followMouse: true, 				// マウス追従の有無
    offsetX: 0,					// 位置
    offsetY: 0,					// 位置
    overrideText: '',				// テキストを上書きする場合は設定
    position: 'bottom-right', 			// 場所
    speed: 500, 				// スピード
    timer: 1000,				// タイマー設定
    tooltipTheme: '.my-custom-theme'		// ツールチップのデザイン
});

オプションはこんな感じみたい。

なかなか使いやすそうです。設置も簡単でいいですね。

Tooltipster