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 - Review: highlighting web page containers using hover CSS pseudo-classes (Page 2 of 4 )
In the last article I discussed how to use a few "hover" CSS pseudo-classes for highlighting the header, main content and footer sections of a web page when the mouse was placed over them. Below I reintroduced the source code corresponding to this initial example, to help you grasp how it works.
Here's the XHTML document that applies the aforementioned highlighting effect on each of its sections:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Section highlight 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;
}
/* style header section */
#header {
padding: 20px;
}
#header:hover {
background: #c0ffc0;
}
/* style content section */
#content {
padding: 20px;
}
#content:hover {
background: #c0ffc0;
}
/* style footer section */
#footer {
padding: 20px;
}
#footer:hover {
background: #c0ffc0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Section highlight 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>
<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="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>
As shown above, altering the background color of the header, content and footer areas that compose the previous web page when the mouse is located over them is a simple process reduced to adding a predefined style to the "hover" state of the sections.
What's more, by using the same hovering technique, it's possible to create more eye-catching visual effects on the styled areas. For example, you can add borders, change the colors of the wrapped paragraphs, and so forth. However, this task will be left as homework for you, in case you may want to take your creative skills to the next level.
Having explained how to bind some "hover" CSS pseudo-classes to the containing divs on an XHTML document, it's time to see how to use them in a more useful fashion. In consonance with the concepts deployed in the introduction, I'm going to demonstrate how to employ a single pseudo-class to build a basic, yet functional, tooltip.
Want to see how this will be accomplished in a few easy steps? Them, go ahead and read the following section.
Style Sheets 
/ 3 
Creating a Drop-Down Menu with the Hover CSS Pseudoclass
