Use only CSS to create styled tooltips for links or anything else you need them for
What We're Aiming For
Hover over the link to see the tooltip. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan urna ac metus accumsan semper. Suspendisse ut nunc nisl. Pellentesque facilisis, risus in mollis rutrum, lectus dui iaculis velit, quis ultricies sapien arcu in ante. Pellentesque tristique blandit tincidunt. Suspendisse potenti. Donec in faucibus ligula. In blandit facilisis erat, et lacinia libero pellentesque non. Suspendisse placerat sodales tempor. Aenean cursus lorem sed sapien dictum quis convallis urna ultrices. Sed aliquet pulvinar ante, a fermentum ante vulputate sit amet. Donec ut odio in nisi feugiat ultricies at sit amet est. Donec eget vestibulum nulla. Cras eleifend sollicitudin nibh dictum luctus. Sed convallis ipsum id metus dictum suscipit.
This is what you should see...
Step By Step
Step One Add the link and tooltip text and add basic styling to the link
HTML
/*The Full HTML*/
<p><a class="tooltip" href="#" tip="This is a link to somewhere cool, and the tooltip gives more info about that cool place...">Hover over the link to see the tooltip</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan urna ac metus accumsan semper. Suspendisse ut nunc nisl. Pellentesque facilisis, risus in mollis rutrum, lectus dui iaculis velit, quis ultricies sapien arcu in ante. Pellentesque tristique blandit tincidunt. Suspendisse potenti. Donec in faucibus ligula. In blandit facilisis erat, et lacinia libero pellentesque non. Suspendisse placerat sodales tempor. Aenean cursus lorem sed sapien dictum quis convallis urna ultrices. Sed aliquet pulvinar ante, a fermentum ante vulputate sit amet. Donec ut odio in nisi feugiat ultricies at sit amet est. Donec eget vestibulum nulla. Cras eleifend sollicitudin nibh dictum luctus. Sed convallis ipsum id metus dictum suscipit.</p>
/*The Deconstructed Link*/
<a
class="tooltip" /*the class will be used to style the tooltip*/
href="http://www.someplace.com" /*target of the link*/
tip="This is a link to somewhere cool, and the tooltip gives more info about that cool place..."> /*IMPORTANT - this is the text that will appear in the tooltip. I've added an attribute called tip to hold the text. You could use the title attribute, but many browsers display the content of 'title' when a link is hovered so that would make the tooltip redundant - see the image in the notes at the foot of the page*/
Hover over the link to see the tooltip /*link text*/
</a>
CSS FOR THIS STEP
a.tooltip{
position:relative; /*ensures that the tooltip is positioned relative to the link rather than the page - see the support section below for more info*/
}
a.tooltip:hover{
text-decoration:none; /*required or IE will underline the text in the tooltip*/
}
Result
When the link is hovered over, the underline is removed but nothing else happens...
Step Two Style the tooltip and make it appear when the link is hovered over
HTML
same as step one
CSS FOR THIS STEP
/****CREATE THE TOOLTIP AND HIDE IT UNTIL THE LINK IS HOVERED OVER***/
a.tooltip:after{ /*see http://cssdemos.tupence.co.uk/before.htm for more info on :after and :before*/
/***Add and style the tooltip text***/
content: attr(tip); /*will display the content of the 'tip' attribute set in the html above*/
content:""; /*because there's nothing between the "" the content of the psuedo elements will be blank*/
top:15px; /*places the triangle 15px from the top of the link*/
left:0px;
/*we want the triangle to be 14px wide and high. To do this we'll use borders - the bottom will be 14px and the colour of the triangle; the left and right will be transparent and 7px each. This creates a square 14px by 14px, by setting the left and right border as transparent we remove the sides to create the triangle*/
border-right:7px transparent solid;
border-bottom:14px #c00d3f solid; /*same colour as the top background gradient for the tooltip*/
border-left:7px transparent solid;
/*hide the triangle until the link is hovered*/
display:none;
}
/***DISPLAY THE TRIANGLE WHEN THE LINK IS HOVERED OVER***/
a.tooltip:hover:before{
display:block;
}
Result
Now you should be able to see the tooltip and the triangle when the link is hovered over...
Full Code For You To Copy And Paste
HTML
<p><a class="tooltip" href="#" tip="This is a link to somewhere cool, and the tooltip gives more info about that cool place...">Hover over the link to see the tooltip</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan urna ac metus accumsan semper. Suspendisse ut nunc nisl. Pellentesque facilisis, risus in mollis rutrum, lectus dui iaculis velit, quis ultricies sapien arcu in ante. Pellentesque tristique blandit tincidunt. Suspendisse potenti. Donec in faucibus ligula. In blandit facilisis erat, et lacinia libero pellentesque non. Suspendisse placerat sodales tempor. Aenean cursus lorem sed sapien dictum quis convallis urna ultrices. Sed aliquet pulvinar ante, a fermentum ante vulputate sit amet. Donec ut odio in nisi feugiat ultricies at sit amet est. Donec eget vestibulum nulla. Cras eleifend sollicitudin nibh dictum luctus. Sed convallis ipsum id metus dictum suscipit.</p>
The demo uses postition:absolute together with position:relative, so here's a brief explanation... position:relative -- lets you position an object relative to its normal position, using top, bottom, left and right position:absolute -- removes an object from the normal flow and positions it exactly where you say on the page position:relative with position:absolute -- lets you position a child element inside its parent. If you don't first use position:relative on the parent element, the absolutely positioned child will move outside the parent.
z-index specifies the stack order of an element within the document. Elements with a higher z-index will appear infront of those with a lower z-index. Note that it only works on positioned objects.
Why Not Use The Title Attribute?
You could use the title attribute within the link to hold the tooltip text, but browsers already display the content of title when a link is hovered over, which would make the styled tooltip redundant, as demonstrated in this screencap
Browser Support
The demo works in all the latest browsers, including IE8, IE9 and IE10 (although the gradients and border-radius don't work in IE8, even with CS3Pie).
