Home arrow Style Sheets arrow Building CSS-based Tooltips with the Hover Pseudoclass

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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
December 21, 2009
  1. · Building CSS-based Tooltips with the Hover Pseudoclass
  2. · Review: highlighting web page containers using hover CSS pseudo-classes
  3. · Building CSS-based web page tooltips
  4. · Adding some CSS styles to the structural markup

print this article

Building CSS-based Tooltips with the Hover Pseudoclass
(Page 1 of 4 )

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!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials