【tipsy】シンプルでカッコいいツールチップを表示するjQueryプラグイン

tipsy

tipsy – Facebook-style tooltip plugin for jQuery

使い方はとても簡単で要素を指定してtipsyを実行するだけ。

ツールチップの表示位置や表示されるまでのスピードなども設定できます。
また、HTMLだけではなくSVGのツールチップも装飾してくれます。

SVGでは、ツールチップをtitle属性ではなく、titile要素をツールチップを表示したい要素の子要素として記述します。
svgでのツールチップの記述。

tipsyはこの場合でも問題なくツールチップを装飾してくれます。
jQueryを読み込まないとならないけれど、D3.jsと組み合わせてつかっても便利です。

example