[CSS]CSS3対応・非対応ブラウザで動作するアイコン付きの素敵なツールチップ
CSS3対応ブラウザではより美しく、非対応ブラウザでもそれなりに美しいアイコン付きのツールチップを紹介します。
CSS3で実装する、簡単で美しいツールチップのチュートリアル
IE7など古いブラウザでもそれなりに表示される、CSS3で実装するツールチップのチュートリアルを紹介します。 IE7でのキャプチャ 背景色はRGBaとは別に指定しておくと、カラーも反映されます。 実装 元記事では最初に、a要素のtitle属性を利用した実装例がありますが、それは省略して、デモページの実装を紹介します。 HTML ポイントはツールチップに表示するテキストをどこに配置するかで、ここではa要素内のspan要素に配置しています。 <a href="">adipiscing elit<span>This is the first tooltip</span></a> CSS 最初にspan要素は非表示にし、CSS3を使ってツールチップを美しくデザインします。 span要素はホバー時に表示にします。 a span{ display:none; color:#fff; backgroun
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSだけで動く軽量1KBのツールチップ実装「Microtip」:phpspot開発日誌
CSSのみで実装できる超軽量なツールチップライブラリ・「Microtip」
