CSS3によるタイトルタグ

CSS3で簡単にTooltipsを実装できる方法をご紹介します。

Javascriptを読み込ませず、無駄を省き実装する事が出来ます。

本来のタイトルタグであれば、カーソルを合わせると「タイトルの内容」が表示されます。

[php]<a href=”” title=”Tooltip”>Tooltip</a>[/php]

ここから下記のコードでタイトル属性を設定します。

[css]
<code>[title]{
position:relative;
}
[title]:after{
content:attr(title);
color:#fff;
background:#333;
background:rgba(51,51,51,0.75);
padding:5px;
position:absolute;
left:-9999px;
opacity:0;
bottom:100%;
white-space:nowrap;
-webkit-transition:0.25s linear opacity;
}
[title]:hover:after{
left:5px;
opacity:1;
}</code>
[/css]

これでTooltipが表示されました。

ですがこれでは改行を入れたり太字、HTMLタグを入力することは出来ません。
そこでSpanを入力します。

[php]<a href=””>タイトル<span>tooltip</span></a>[/php]

[css]
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; }
[/css]

spanタグを非表示にし、hoverで表示させています。

デモサイト：http://www.paulund.co.uk/playground/demo/css3_tooltips/
参考サイト：http://www.paulund.co.uk/css3-only-tooltips