最近新しいサービスを作っているのだが、ようやく最終段階に入り細かいユーザビリティを気にできるようになった。その中で、入力フォームや分かりづらい項目に説明をつけようと思った。

ただのリンクでは寂しすぎる。あまり使われる事がない機能かも知れないがクールに攻めよう。

今回紹介するオープンソース・ソフトウェアはCoolTips、半透明でクールなツールチップだ。

CoolTipsは指定した場所にマウスを持っていくと浮かび上がるツールチップで、半透明の角丸になっている点がクールだ。しかも半透明で、背後の項目が透けてみえる点も良い。

他のライブラリとして、prototype.jsやscript.aculo.usを利用している。ツールチップを表示する項目側は特に設定はなく、title要素に説明文を入れておけば良いだけだ。後はJavaScript側で項目を指定すれば簡単に実現できる。

背景色、枠線色、文字色、影の色、最大幅、表示までの遅延時間、透明度等、数多くの項目が設定できる。ここまで細かく指定できる上にFirefox/IE6-7/Opera/Safariに対応しているとなれば使わない手はない。角丸を実現するのに画像を使っていないので、背景色や枠線を簡単に変更できるというメリットがある。

ヘルプを別なウィンドウにしているサイトは数多いが、新しいタブで開いたりすると項目の確認が面倒だった。これならばその場で即座に確認できる。ユーザビリティを高める上でお勧めのツールだ。

CoolTips — Neat tooltips under the mouse
http://www.wildbit.com/labs/cooltips/