ふわっと下から浮き出るツールチップ：脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（3）（1/3 ページ）

上手く使うことで画面をスッキリとさせられるツールチップ（吹き出し）。今回は、アニメーションするツールチップをCSSだけで作ってみます。

[内田 順一，Chime of Shigan]

　今回は、アニメーションするツールチップ（吹き出し）をCSSだけで作ってみたいと思います。

　ツールチップを使えば、説明文などが必要な場合も画面をスッキリとさせられます。特に、Webサイトの訪問者にアクションを求める入力フォーム画面などでその効果を発揮します。例えば、購入手続き画面においては、何度も注文したことがあるリピート客にとって、入力方法の説明はもはや分かりきった“ノイジー”な情報ですね。こうした「知りたい人は簡単に情報を得られ、知っている人は目に触れずに済む」ようにするために、ツールチップは非常に有効な手段となります。ただし、注釈文をきちんと認識させるべき会員登録画面などでは、ツールチップで説明を隠してしまうのは望ましくないので、安易な乱用は避けたいものです。

　ツールチップの実装には、「Tooltipster」といった多機能なjQueryプラグインもありますが、「マウスオーバ時に注釈がツールチップ内に表示される」という単純な動作が必要なだけであれば、CSSのみでの作成がおすすめです。任意のアニメーションを自由に付けることも可能です。

　CSSだけでツールチップを表示する方法としては、「Easy CSS Tooltip」があります。Internet Explorer 5以降に対応し、記述方法が非常に簡潔なため、これを改造して作っていきたいと思います。

　まず、上記Webサイトの「Download this Script」から元データをダウンロードしてみましょう。

　次のような設定となっています。

a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}

【CSS】

Easy <a href="#" class="tooltip">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.

【HTML】

　<span>……</span>で囲まれた吹き出しに相当する部分は、通常時は「display:none;」で表示を消してありますが（セレクタ「a.tooltip span」の指定）、「Tooltip」という語句にマウスオーバした際には、「display:inline;」で表示させるようになっています（セレクタ「a.tooltip:hover span」の指定）。

　この仕組みを使って、次のようなクレジットカード情報の入力画面を作ってみました。

• サンプル（その1）

　赤いクエスチョンマークにマウスオーバすると、入力項目についての説明がツールチップで表示されます。この時点では、「ご利用カード」「カード番号」などの項目枠のデザインと、クエスチョンマークにCSS指定を与えただけで、Easy CSS Tooltip自体にはまだほとんど手を入れていません。ここから解説をスタートします。

1）吹き出しの表示位置を変える

　はじめに、ツールチップの吹き出しの表示位置を変更します。現状は、吹き出しがクエスチョンマークの右横に出ていますが、上に出るようにしたいと思います。

　まず、表示位置の指定方法を根本的に変えるので、簡易的な調整に使われている「margin-left:8px;」を削除します。また、吹き出しの幅を200pxに広げておきます。

a.tooltip span {
display:none;
padding:2px 3px;
/*margin-left:8px;		位置指定の方法変更により不要になったので削除*/
width:200px;		/*吹き出しの幅を200pxに変更*/
}

　続いて、マウスオーバした際に吹き出しをクエスチョンマークの下端から25px上に表示するため、「bottom:25px;」を指定します。また、クエスチョンマークを左右の中心にして吹き出しを出すために、吹き出しの位置を幅200pxの半分の100px左にずらします。「left:-100px;」と指定します。さらに枠線を削除したり、文字色、背景色の変更をしました。

a.tooltip:hover span{
display:inline;
position:absolute;
/*border:1px solid #dc0000;	吹き出しの枠線色を削除*/
background:#dc0000;         /*吹き出しの背景色の変更*/
color:#fff;                 /*吹き出しの文字色の変更*/
bottom:25px;                /*位置指定追加。クエスチョンマークの下端から、吹き出しの下端を25px上げる*/
left:-100px;                /*位置指定追加。吹き出しの幅の半分を左に移動させる*/
}

　ただし、これだけではWebブラウザのウィンドウ枠に対して、下から25px、左にマイナス100pxの位置に吹き出しが表示されてしまいます。「何を表示位置の基準点にするのか」を指定する必要があります。今回は、クエスチョンマークが基準点となるため、そのセレクタに「position:relative;」を指定します。

/*クエスチョンマーク*/
a{
color:#fff;
font-weight:bold;
text-align:center;
text-decoration:none;
display:inline-block;
width:16px;
height:16px;
background:#dc0000;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
position:relative;	/*吹き出しの表示位置指定の基準とするため追加*/
}

　クエスチョンマークの上に吹き出しが表示されるようになったことを、次のサンプルから確認しましょう。

• サンプル（その2）