上手く使うことで画面をスッキリとさせられるツールチップ(吹き出し)。今回は、アニメーションするツールチップをCSSだけで作ってみます。
今回は、アニメーションするツールチップ(吹き出し)を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;}
Easy <a href="#" class="tooltip">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.
<span>……</span>で囲まれた吹き出しに相当する部分は、通常時は「display:none;」で表示を消してありますが(セレクタ「a.tooltip span」の指定)、「Tooltip」という語句にマウスオーバした際には、「display:inline;」で表示させるようになっています(セレクタ「a.tooltip:hover span」の指定)。
この仕組みを使って、次のようなクレジットカード情報の入力画面を作ってみました。
赤いクエスチョンマークにマウスオーバすると、入力項目についての説明がツールチップで表示されます。この時点では、「ご利用カード」「カード番号」などの項目枠のデザインと、クエスチョンマークにCSS指定を与えただけで、Easy CSS Tooltip自体にはまだほとんど手を入れていません。ここから解説をスタートします。
はじめに、ツールチップの吹き出しの表示位置を変更します。現状は、吹き出しがクエスチョンマークの右横に出ていますが、上に出るようにしたいと思います。
まず、表示位置の指定方法を根本的に変えるので、簡易的な調整に使われている「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; /*吹き出しの表示位置指定の基準とするため追加*/ }
クエスチョンマークの上に吹き出しが表示されるようになったことを、次のサンプルから確認しましょう。
Copyright © ITmedia, Inc. All Rights Reserved.