半透明の角まるツールチップを表示するJavaScript （CoolTips）

JavaScriptでツールチップを表示するライブラリは比較的多く存在する。ライブラリ選択の基準にデザインが重要になってくる。シンプルなデザインの角まるツールチップで使いやすいのがCoolTips。ライブラリも軽量になっている点もうれしい。

角まるでシンプルなデザインのライブラリはほかにも存在するが、CoolTipsの注目すべき点は、画像イメージを使わずに角丸表示をしている点。画像イメージを使わないことで、ツールチップの表示色を容易に変更できるようになっている。

オプションで細かく指定
ツールチップの色指定以外にも、文字色、透過率はもちろん、マウス追尾やアニメーションの速度まで細かく指定できる。オプション機能が充実しているが、比較的扱いやすくなっており導入もスムーズに行える。

動作にはprototype.js、scriptaculous.jsが必要になる。必要なライブラリ類はダウンロードファイルに含まれている。

ツールチップの用途として、補足や説明としてリンクなどに利用する場合が多い。CoolTipsの動作デモのように、入力エリアにツールチップを表示するだけでユーザビリティ向上が期待できる。また、ボタンやリンク画像などに効果的にツールチップを表示するだけで、グッとわかりやすくなるので、ぜひ試していただきたい。