JavaScriptを使わずCSSのみでシンプルなツールチップ実装
2008年03月27日
スポンサード リンク
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的にもシンプルで分かりやすくて実装しやすいのが特徴。
吹き出し部分もCSSでデザインすればよりそれっぽい物になりそう。
スクリプトは嫌だ、CSSのみでやりたいという方にはオススメのサンプルですね。
関連エントリ
スポンサード リンク
投稿者 KJ : 2008年03月27日 10:08
|
![]()
間違いの指摘をしていただける方はメールでお願いします
最新のブログ記事
- Firefoxで閲覧中のサイトをPDFに変換できるアドオン「PrintPDF」
- 秀逸なサイトフッターのデザイン集76
- フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」
- 2008年5月15日 管理人のブックマーク
- アーティスティックなRSSアイコンいっぱい
- 人物と水滴画像を合成して水人間を作成するPhotoshopチュートリアル
- オンラインでPHPコード整形「Online php code beautifier」
- 2008年5月14日 管理人のブックマーク
- 小さなデータをRESTで保存&取得できる「tinydb」
- 心を奪われるような美しいタイポグラフィー集
- CSSを使ってファンシーなボタンを作成するテクニック

















