Building CSS-based Tooltips with the Hover Pseudoclass
In this second installment of a four-part series, I demonstrate how easy it is to build a basic tooltip using only the functionality provided by the “hover” CSS pseudo classes. The technique you'll see here will work with newer versions of IE, Firefox, Google Chrome and other browsers.
Building CSS-based Tooltips with the Hover Pseudoclass - Adding some CSS styles to the structural markup (Page 4 of 4 )
In reality, turning the previous "tooltip" div into a functional pop-up note is a two-step process that can be described as follows: first, its parent container must be placed relatively on the document, while the tooltip itself must be assigned an absolute position. And last but not least, the "hover" state of its parent should make the tooltip visible on screen.
If this description sounds a bit confusing to you, which is perfectly understandable, the following CSS snippet should help to dissipate your doubts. Take a look at it, please:
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #eee;
font: 1em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
background: #fff;
}
#header, #content, #footer {
padding: 20px;
}
/* news container */
#news {
padding: 20px;
background: #ffffc0;
position: relative;
}
/* news header */
#news h3 {
color: #f00;
}
/* news tooltip */
#news #tooltip {
display: none;
width: 300px;
padding: 10px;
background: #c0ffc0;
font-size: 0.75em;
position: absolute;
top: 0;
left: 400px;
border: 1px solid #000;
}
/* display news toltip */
#news:hover #tooltip {
display: block;
}
</style>
As you can see, not only has the "news" div been relatively positioned on the XHTML document, but its child "tooltip" container has been hidden from view, due to the assignment of the "display: none" property. Even though these styles are crucial for setting the initial state of the tooltip, the CSS code that really makes it work properly is the following:
/* display news toltip */
#news:hover #tooltip {
display: block;
}
See how the :hover state of the "news" container is used cleverly to indirectly display the tooltip on screen? I bet you do! However, the best way to understand how the previous CSS styles do their business is by showing the complete code of the earlier web page. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Simple tooltip using :hover CSS pseudo class</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #eee;
font: 1em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
background: #fff;
}
#header, #content, #footer {
padding: 20px;
}
/* news container */
#news {
padding: 20px;
background: #ffffc0;
position: relative;
}
/* news header */
#news h3 {
color: #f00;
}
/* news tooltip */
#news #tooltip {
display: none;
width: 300px;
padding: 10px;
background: #c0ffc0;
font-size: 0.75em;
position: absolute;
top: 0;
left: 400px;
border: 1px solid #000;
}
/* display news toltip */
#news:hover #tooltip {
display: block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Simple tooltip using :hover CSS pseudo class</h1>
<h2>Header section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
<div id="content">
<h2>Main content section</h2>
<div id="news">
<h3>Latest web development articles</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
<div id="tooltip">
<p>For more helpful web development articles, visit <a href="http://www.devshed.com">Devshed.com</a> right now!</p>
</div>
</div>
</div>
<div id="footer">
<h2>Footer section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
</div>
</body>
</html>
There you have it. At this point, if you wish to test this example code on your own browser, you should see something similar to the following screen capture:
Not too bad, eh? Considering that the tooltip required only the coding of a few simple CSS styles, and that it will work regardless of whether or not JavaScript is enabled in the client, the final result is more than acceptable. Therefore, now that you know how to use "hover" CSS pseudo classes to create more dynamic web page elements, go ahead and use this technique to provide visitors to your website with a more pleasant experience.
Final thoughts
That's all for the moment. In this second installment of the series I demonstrated how easy it is to build a basic tooltip by using only the functionality provided by "hover" CSS pseudo classes. Also, keep in mind that if you're planning to test the web page previously defined with Internet Explorer 6 and below, it'll fail silently. Nonetheless, newer versions of it, along with Firefox, Google Chrome and other browsers will display the tooltip as expected.
In the forthcoming part, things will become even more interesting, since I'll be discussing how to use the power of "hover" CSS pseudo classes to build a clean drop-down menu.
Don't miss the next tutorial!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
Style Sheets 
/ 3 
Creating a Drop-Down Menu with the Hover CSS Pseudoclass
