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

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

デモのキャプチャ

Sexy Tooltips with Just CSS
デモページ

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

デモのキャプチャ

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

デモのキャプチャ

重要なポイントに。

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

CSS3に非対応のブラウザ

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

デモのキャプチャ

CSS3非対応のIE7での表示。

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

ツールチップの実装

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

HTML

クラシックタイプです。

CSS

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

CSS

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

CSS

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

sponsors

top of page

©2018 coliss