CSS3で実装する、簡単で美しいツールチップのチュートリアル

IE7など古いブラウザでもそれなりに表示される、CSS3で実装するツールチップのチュートリアルを紹介します。

CSS3 Only Tooltips

[ad#ad-2]

• デモ
• 実装

CSS3で実装するツールチップのデモ

デモではさまざまなカラーを使った半透明なツールチップが実装されています。

デモページ

CSS3の角丸やRGBaに対応したブラウザは、美しいツールチップが表示されます。

Firefoxでのキャプチャ

CSS3非対応ブラウザでは角丸やRGBaなしで、それなりの表示になります。

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;
    background:rgba(51,51,51,0.75);
    padding:20px;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    width:100px;
    text-align:center;
    position: absolute;
    z-index:10;
}
a { display: inline-block;}
a:hover span{ display:block; }

[ad#ad-2]

デモページのように、ツールチップに異なるカラーをスタイルする場合は、spanタグにclassを加えます。
※class名は分かりやすいように、ここではカラーを明示しておきます。

HTML:異なるカラーを適用

<a href="">Duis sit amet pretium purus.<span class="blue">The blue tooltip</span>
<a href="">convallis egestas felis suscipit<span class="red">The red tooltip</span></a>

あとはclassごとにカラーをスタイルシートで設定します。

CSS:異なるカラーを適用

span.blue{
    background:rgba(41,137,216, 0.75);
    border:1px solid #1E5799;
}
span.red{
    background:rgba(247,49,49, 0.75);
    border:1px solid #F73131;
}