CSSだけで簡単なツールチップを作成しました。
WEBサイト内の説明を書く場合などにツールチップを利用することがあります。
管理画面などでは項目ごとにどのような機能かを説明したりと便利です。
jQueryなどでもツールチップを作成することができますが、
今回はCSSのみで簡単なツールチップ（吹き出し）を作成する方法をメモします。
■ CSSでツールチップ（吹き出し）を作成
・テキストリンクにツールチップを付ける場合
【CSS】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <style type="text/css">a.tooltip span { display: none; width: 200px; padding: 5px; margin: 10px 0 0 -10px;}a.tooltip:hover span{ display: inline; position: absolute; border: 1px solid #CCC; border-radius: 5px; background: #F7F7F7; color: #666; font-size: 12px; line-height: 1.6em;}</style> |
【HTML】
1 2 3 | <a href="#" class="tooltip">テキストリンク<span>説明を書きます。<br />説明を書きます。説明を書きます。</span></a> |
【表示例】
・画像にツールチップを付ける場合
【CSS】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <style type="text/css">a.tooltip span { display: none; width: 200px; padding: 5px; margin: 10px 0 0 -10px;}a.tooltip:hover span{ display: inline; position: absolute; border: 1px solid #CCC; border-radius: 5px; background: #F7F7F7; color: #666; font-size: 12px; line-height: 1.6em;}</style> |
【HTML】
1 2 3 | <a href="#" class="tooltip"><img src="hatena.jpg" /><span>説明を書きます。<br />説明を書きます。説明を書きます。</span></a> |
【表示例】
