前の記事 ≪：PHPでRAR形式のファイルを扱えるエクステンション「PECL::rar」
次の記事 ≫：約５００携帯端末を網羅するケータイテストエミューレーター「P1 Emula...

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

2008年03月27日-はてなブックマーク

スポンサード リンク
[PR]　英単語を忘却曲線アプリを使って超効率よく記憶する方法

Easy CSS Tooltip | Kollermedia.at

JavaScriptを使わずCSSのみでシンプルなツールチップ実装。
CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。



コードは以下のようにシンプルにかけます。

<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>

HTML的にもシンプルで分かりやすくて実装しやすいのが特徴。
吹き出し部分もＣＳＳでデザインすればよりそれっぽい物になりそう。
スクリプトは嫌だ、ＣＳＳのみでやりたいという方にはオススメのサンプルですね。

関連エントリ

関連の記事検索：チュートリアル, Webデザイン, ツールチップ, JavaScript
スポンサード リンク

By.KJ : 2008年03月27日 10:08 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)