Translated from our Japanese archive. Dates, product names and examples reflect the original article; this is not an updated product or service recommendation.
Tooltips with CSS3
Here is a simple way to add tooltips with CSS3, without loading JavaScript. A normal title attribute displays its text when the pointer rests on an element.
[php]<a href=”” title=”Tooltip”>Tooltip</a>[/php]
Use the following CSS to style the title attribute:
[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]
The tooltip now appears. This method cannot include line breaks, bold text or HTML markup. For those, use a span instead.
[php]<a href=””>Title<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]
The span is hidden by default and displayed on hover.
