Building CSS-based Tooltips with the Hover Pseudoclass
(Page 1 of 4 )
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.
Even though CSS pseudo-classes have been available for a long time, the inability for Internet Explorer 6 and below to support them with selectors other than mere <a> elements has imposed considerable constraints on leveraging their full potentiality.
In the specific case of the "hover" pseudo-class, which can be used for defining the visual presentation of a given HTML element when the mouse is placed over it, this restriction has been a harsh torture for many web designers. They chafed at their possibilities being limited to applying CSS-based hovering effects only to individual inline links, or in the best cases, to entire navigation bars.
However, this frustrating scenario has started to change. With the release of IE 7 and 8, both of which offer a decent support for "hover" pseudo-classes for most web page elements, it's possible to create rollover effects that will be displayed consistently by most modern browsers.
To illustrate how useful CSS "hover" pseudo-classes can be when assigned to multiple HTML elements asides from simple hyperlinks, in the introductory part of this series I built an example that showed how to use them for dynamically changing the background color of different divs on a web page in response to a "mouseover" event.
While this first example was quite rudimentary indeed, it revealed the remarkable potential of "hover" pseudo-classes when employed in more creative ways. Of course, highlighting sections of an (X)HTML document without using JavaScript may seem at first sight a minor task, but this is a misleading opinion, believe me.
In reality, "hover" pseudo-classes can be used for styling "indirectly" (if the term is really applicable) several selectors, which permits developers to add a dynamic behavior to elements of a web document without relying on client-side scripting at all. That sounds pretty interesting, right?
In the lines to come I'll be showing how to take advantage of the functionality given by "hover" pseudo-classes for building pure CSS-based tooltips, which you'll be able to tweak and customize according to your personal preferences.
Ready to learn the ins and outs of this styling process? Then let's get started!
Next: Review: highlighting web page containers using hover CSS pseudo-classes >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 3 
