CSSで作るツールチップ

Freebies - Firefox style Transparent Tool Tips (PSD) By: The Open Dept.
少ない表示領域を補うためや、ページをスッキリされる手段としてツールチップは良く利用されます。
jQueryやjavascriptを利用したリッチなツールチップのプラグインは良く見かけますが、今回はCSSのみでツールチップを実現してみました。
ツールチップはCSS3を利用してフキダシようにしたものとIE8以下のモダンブラウザでも動作する2種類を作成したので作り方を紹介します。
ツールチップ
フキダシのようなツールチップ
完成形としては、以下のようになります。
マウスを上にのせて下さい
サンプル
フキダシのようなツールチップ
サンプル
フキダシのようなツールチップ
HTML
<div class="tooltip1">マウスを上にのせて下さい <span> サンプル <br /> フキダシのようなツールチップ </span> </div>
HTMLのソースはこのように、divタグの中にspanタグを入れます。divタグの内容はそのまま表示し、spanタグの内容はツールチップとして表示されます。
CSS
/* 表示文字の装飾 */ div.tooltip1{ color: #555; display: inline-block; /* インライン要素化 */ border-bottom:dashed 1px #555; /* 下線を引く */ } /* ツールチップ部分を隠す */ div.tooltip1 span { display: none; } /* マウスオーバー */ div.tooltip1:hover { position: relative; color: #333; } /* マウスオーバー時にツールチップを表示 */ div.tooltip1:hover span { display: block; /* ボックス要素にする */ position: absolute; /* relativeからの絶対位置 */ top: 25px; font-size: 90%; color: #fff; background-color: #51A2C1; width: 205px; padding: 5px; border-radius:3px; z-index:100; } /* フキダシ部分を作成 */ div.tooltip1 span:before{ content:''; display:block; position:absolute; /* relativeからの絶対位置 */ height:0; width:0; top:-13px; left:15px; border:13px transparent solid; border-right-width:0; border-left-color:#51A2C1; transform:rotate(270deg); /* 傾きをつける */ -webkit-transform:rotate(270deg); -o-transform:rotate(270deg); z-index:100; }
CSSの全体はこのようになります。まず、全体を囲っているdivタグを「display: inline-block; 」でブロック要素からをインライン要素に変更します。ブロック要素のまま何もしなければ「width:100%」の状態になるため文字の横の何もない部分にカーソルを合わせてもツールチップが出てしまいます。
次に、「class=”tooltip1″」の子要素のspanタグを「display: none;」で隠します。
/* ツールチップ部分を隠す */ div.tooltip1 span { display: none; }
マウスオーバー時には「relative」を設定します。これで子要素(spanタグ)に「absolute」を設定すれば、「relative」からの絶対位置が設定できます
/* マウスオーバー */ div.tooltip1:hover { position: relative;
子要素にも同様に、マウスオーバー時にCSSを設定します。「display: block;」で隠した要素を表示し「position: absolute;」で親要素のdivタグから「top: 25px」の位置を設定します。
/* マウスオーバー時にツールチップを表示 */ div.tooltip1:hover span { display: block; /* ボックス要素にする */ position: absolute; /* relativeからの絶対位置 */ top: 25px;
最後に擬似要素「before」で要素を作成し、フキダシ部分を作成します。
/* フキダシ部分を作成 */ div.tooltip1 span:before{ content:'';
IE8以下でも動作するツールチップ
マウスを上にのせて下さい
サンプル
IE8以下でも動作するツールチップ
サンプル
IE8以下でも動作するツールチップ
色や見た目は変えていますが、実はほぼ上の フキダシのようなツールチップ と同じCSSでIE8以下の対応が実現できます。
HTML
<div class="tooltip1">マウスを上にのせて下さい <span> サンプル <br /> フキダシのようなツールチップ </span> </div>
CSS
/* 表示文字の装飾 */ div.tooltip2{ color: #555; display: inline-block; /* インライン要素化 */ border-bottom:dashed 1px #555; /* 下線を引く */ } /* ツールチップ部分を隠す */ div.tooltip2 span { display: none; } /* マウスオーバー */ div.tooltip2:hover { position: relative; color: #333; } /* マウスオーバー時にツールチップを表示 */ div.tooltip2:hover span { display: block; /* ボックス要素にする */ position: absolute; /* relativeからの絶対位置 */ top: 20px; background-color: #444; padding: 5px; width: 300px; color: #fff; font-size: 90%; z-index: 100; }
IE8以下のブラウザで動作するツールチップはこのようになります。
ツールチップを表示しているロジックは全く同じで、マウスオーバー時に「display: block;」を指定し、「display: none;」で消した要素を表示しています。
ただし、IE8以下でフキダシの「▲」部分を実現するときは、画像を使用する以外の方法が無いため、ここでは単純なボックスの表示のみとしています。
Related Posts

« jQueryの無名関数「(function(){})()」の使い方 無料で使えるフラットアイコンフォント「Genericons」 »
Trackback URL
http://webnonotes.com/css/tooltip/trackback/No Comments Yet