[CSS]CSS3対応・非対応ブラウザで動作するアイコン付きの素敵なツールチップ

CSS3対応ブラウザではより美しく、非対応ブラウザでもそれなりに美しいアイコン付きのツールチップを紹介します。

Sexy Tooltips with Just CSS
デモページ

ツールチップは実際のサイトですぐに利用できるようにいくつかのパターンがデモページに用意されています。

アイコン無しのクラシックタイプ。

重要なポイントに。

ヘルプ用のアイコン付き。

インフォメーション用のアイコン付き。

警告や注意を促すアイコン付き。

CSS3に非対応のブラウザ

ツールチップはCSS3を使用して美しくスタイリングされていますが、CSS3非対応ブラウザでもそれなりに表示されます。
下記は、IE7での表示です。

CSS3非対応のIE7での表示。

CSS3の角丸やシャドウなど微妙なエフェクトが適用されていません。

ツールチップの実装

ツールチップの実装には、a要素が利用されています。

HTML

クラシックタイプです。

CSS

ツールチップの基本スタイルです。

CSS

ホバー時のスタイルです。

CSS

ツールチップ（クラシック）のデザインです。