Continuing the series called "We can do it without jQuery", I could not miss the chance of talking about CSS tooltips. CSS tooltips are an often misunderstood feature that can actually enhance the visual appearance of our pages. In its purest form, a CSS tooltip consist of an hidden span element contained within a link. When a user hovers the aforementioned link, the tooltip appears just below the link. As many of you have already guessed, this is all about contextual and absolute positioning, as we'll see later. We start with this markup:
<a href="#" class="tooltip">amet <span>Lorem ipsum dolor</span></a>
And this is our CSS:
a.tooltip {
position: relative;
text-decoration: none;
border-bottom: 1px solid;
}
a.tooltip span {
width: 150px;
display: none;
background: #ffffa0;
color: #000;
font-size: small;
padding: 5px;
border: 1px solid #d40;
-moz-border-radius: 6px;
border-radius: 6px;
}
a.tooltip:hover span {
display: block;
position: absolute;
top: 18px;
left: 5px;
}
As you can see, the tooltip is first hidden and then shown when the user hovers the link with his mouse. We've created a new contextual positioning using the declaration position: relative on each link, so that the tooltip will be absolutely positioned just under the link it belongs to. You can see the final result here.