ツールチップをCSSで

2008/10/27 00:00

マウスカーソルをかざすとメッセージが表示されるよくあるアレ。ツールチップ。

アンカーや画像以外でこれを実現したくて調べてみると、良く出てくるのがjavascriptを使用するもの。

良さそうなのがあったので、じゃ、それでいいか、と思ってたらCSSのみで実現しているサンプルを見つけた。非常にシンプルで、もちろんCSSによる装飾も可能。これで十分だ。

Easy CSS Tooltip

http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/#

<style type=”text/css”>  
/* Easy CSS Tooltip – by Koller Juergen [www.kollermedia.at] */  
* {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }  
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;}  
</style>  
  
Easy <a href=”#” class=”tooltip”>Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.

Easy TooltipThis is the crazy little Easy Tooltip Text..

JavaScriptを使わずCSSのみでシンプルなツールチップ実装

http://phpspot.org/blog/archives/2008/03/javascriptcss_2.html