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 - Building CSS-based web page tooltips (Page 3 of 4 )
Remember that at the beginning of this article I mentioned it was possible to use "hover" CSS pseudo classes to indirectly style a specified selector? Well, in this particular case I'm going to exploit this handy feature for building a pop-up note (or tooltip) that will be displayed inside a containing div.
However, before I get into the full details of this process, it's necessary to create the web page that will house the tooltip, along with the corresponding container. That's the easy part! Fortunately, all the markup required for building the tooltip is as simple as this:
<!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>
</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>
Apart from the typical header and footer sections, the above web page includes a main area comprised of two additional divs, identified as "news" and "tooltip" respectively. The idea behind coding these containers is that each time a user places the mouse over the first one, a pop-up note appears, suggesting that they visit http://www.devshed.com to read some additional articles.
The structure assigned to the sample containers shows nothing particularly special, except for the fact that my goal here is to make the tooltip work like a charm without having to add a piece of JavaScript. So, how can this be done?
Yes, you guessed right! Thanks to the clever use of "hover" CSS pseudo classes it's possible to create this subtle animation, and best of all, it'll be displayed consistently across the vast majority of modern browsers.
However, to learn how this will be achieved, you'll have to read the following segment. But don't worry, it's only one click away.
Style Sheets 
/ 3 
Creating a Drop-Down Menu with the Hover CSS Pseudoclass
