ツールチップでさりげなく情報を伝える

サイトの情報設計をする際，カテゴリーを整理したり，グローバルメニューの分け方を考えるのが重要ですが，メニューでひとことでは言い切れない場合が少なくありません。

特に，ユーザーの利用頻度が多い管理画面などは，「⁠あれ，これ何のページだっけ？」ということが起こり得ます。運用・管理の引き継ぎで大変な想いをした方も少ないないのではないでしょうか。

そんなときに，「⁠ひと言だけれど，カーソルを合わせたときに説明が出る」ようにすれば，ユーザーにとってわかりやすく，ユーザビリティの高いUIになります。

今回は，ツールチップを使って，ユーザーの操作の邪魔にならない形でさりげなく情報を伝える方法をご紹介します。ツールチップとは，カーソルを合わせたときに補足情報が表示される小さな枠のことで，使い方によっては効果的なUIを実現することができます。

tipsyとDD_belatedPNG.jsを準備する

今回のサンプルは以下のようなものです。

今回は，「⁠tipsy」というjQueryのプラグインを使って，ツールチップを表示します。

tipsyは，Twitterでも使われているのでご存知の方もいらっしゃるのではないでしょうか。MITライセンスで配布されている，使いやすいプラグインです。

下記サイトからパッケージをダウンロードしてください。

• http://onehackoranother.com/projects/jquery/tipsy/

そして，JavaScriptとCSSを，以下のファイル構成図のように配置します。

今回は透過PNGを使用し，IE6に対応させるため，「⁠DD_belatedPNG.js」もダウンロードしておいてください。

• http://www.dillerdesign.com/experiment/DD_belatedPNG/

フェードインの動きと透過PNGを取り入れる

動きにフェードインなどの効果をつけると，ユーザーに「おっ」と思わせるようなUIにすることができます。また，透過を用いれば，デザインの自由度が高くなり，より魅力的なにすることができるのではないでしょうか。

今回は，動きにフェードインを取り入れ，透過PNGを使って，ツールチップをデザインします。それぞれ，tipsyのオプションによる設定，および透過PNG（IE6用にDD_belatedPNG.jsを使用）を使います。

では，ソースを見ていきましょう。

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/tipsy.css" type="text/css" />
<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<script type='text/javascript'>
  $(function() {
    $('.tooltip').tipsy({gravity: 'w',fade:true});    
  });
</script>
<!--[if IE 6]>
	<script src="js/DD_belatedPNG.js"></script>
	<script>
		DD_belatedPNG.fix('.transparent');
	</script>
<![endif]-->

「style.css」でページのスタイルを指定し，「⁠tipsy.css」にツールチップのデザインのスタイルを記述します。

「jquery-1.3.2.min.js⁠」⁠，「⁠jquery.tipsy.js」を読み込みますが，今回はデザインをtipsyのデフォルトのものから変更しているため，「⁠jquery.tipsy.js」に大きく変更を加えています。

tipsyは，ツールチップを表示する方向を指定することができます。

• w・・・右に表示
• s・・・上に表示
• e・・・左に表示
• n・・・下に表示

上記のアルファベットを，tipsyのgravityオプションに指定します。

「$('.tooltip')」には，tipsyを指定するclassを記述します。今回は「fade:true」とすることで，フェードイン・フェードアウトの動きを指定しています。

最後の[if IE 6]の部分では，IE6のみに対応させる透過PNGを設定を記述しています。