CSSだけでシンプルなツールチップを実現する

javascriptを使わないでcssだけでツールチップができる方法を

見つけたのでメモひらめき電球

Easy CSS Tooltip | Kollermedia.at

利用するときに直ぐに使えるようにするために個人的にメモ。

<html>
<head>
</head>
<style>
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; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
</style>
<body>
Easy <a href="#" class="tooltip">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.
</body>
</html>