If you’re reading this from an RSS feed, you’ll need to switch over to the web page (the CSS is in the head section, and thus isn’t loaded by an RSS reader)
In this tutorial you’ll learn how to make some really clever CSS-based tooltipsAnd it's actually really easy!.
The most basic way to create a tooltip from a link is to use the title attribute in a link. This small bit of text is displayed in a small box.
A tooltip is often used to explain outgoing links. A simple, unobtrusive tooltip is often all we need to use in our site design.
However what if we wanted to explain something further, or we wanted to add some formatting to our tooltip? Browsers differ in the way they display tooltips, and they differ even further if they spread across multiple lines.
Using the span tag to hide text
- First thing you have to do is remove any extra title attributes you may have on your link, so that it doesn’t interfere with our CSS tooltip.
- Insert the tooltip right after the link text, and enclose it in a span tag, like so:
HTML
<p>
Check
<a href="#">this <span>This is tooltip text!<span></a>
out!
</p> - Now we need to style this. We should first hide the text inside the span tag:
CSS
a span {
display: none;
} - By using the pseudo-class :hover, we can make sure that the text will show only if the user hovers the mouse at our link. We are basically telling the browser: “Change the display from none to block when the user hovers over a link”. Our CSS should now look like this:
CSS
a span {
display: none;
}
a:hover span {
display: block;
} - If you try to run your code now, you’ll notice some serious problems. The span element will act like a block and therefore push everything after it downwards!
How are we going to get the span to appear without interrupting the page flow? We must use absolute positioning to get this. This way, it will have no effect on other elements, except for covering part of them. I’ve also applied some basic styling below to make it look more like a tooltip:a:hover span {
position: absolute;
display: block;
/* styling */
background-color: #323232;
color: #FFFFFF;
} - Even though it’s looking more and more like a tooltip, right away you’ll notice some positioning woes. This is because of the absolute setting that we had to use before.
To position it properly, we have to turn the link itself in to an anchor that the absolutely positioned span element can work from. To do that we have to set relative positioning on the link.
In addition, we should also add some absolute positioning by specifying the top and left attributes. Also, we need to ensure that it’s always on the top. To do this we need to add a z-index attribute.
This is how our complete CSS should look (syntax highlighting and all :)CSS
a {
position: relative;
}
a span {
display: none;
}
a:hover span {
position: absolute;
display: block;
/* positioning */
top: 30px;
left: 30px;
z-index: 100;
/* styling */
background-color: #323232;
color: #FFFFFF;
}
Extending the concept
This hover/popup method is very powerful and can be extended towards all sorts of things. You can apply certain “tooltip” classes and even apply some HTML on the tooltip. For example, you can have an image gallery, and a larger version of the image pops up in the tooltip. Remember that they don’t even have to be linksSince you don't specifically need the link tag (hover your mouse over the bold text!)
The original concept for the hover/popup CSS method was first shown on Eric Meyer’s website. Thanks, Eric!
