Home arrow Style Sheets arrow CSS: Building Tooltips with Absolute Positioning

CSS: Building Tooltips with Absolute Positioning

CSS lets you position items both relatively and absolutely on a web page. The use of relative positioning makes sense when your layouts need to be flexible to accommodate various browsers and hardware. But how useful is absolute positioning? More than you might think.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
August 11, 2010
  1. · CSS: Building Tooltips with Absolute Positioning
  2. · Using absolute positioning for basic CSS-based tooltips
  3. · Styling tooltips with the relative/absolute duo
  4. · Adding the CSS code to a web page

print this article

CSS: Building Tooltips with Absolute Positioning
(Page 1 of 4 )

Since the release of CSS long years ago, absolute positioning has been seen by many people as one of its most evil villains -- and to be frank, this fame is justified. How useful can this feature be in an elastic and extremely dynamic media like the web, where page layouts must be designed to accommodate a plethora of resolutions and devices? Not very, really.

The truth is, on its own, the functionality of absolute positioning is very limited, not to say non-existent, at least in production environments. The good side of this story, however, is that when coupled with an appropriate partner, this property can be of great help in the design of fixed layouts and even in the implementation of certain features on web pages.

You still donít have a clue about the mysterious partner? Well, hereís a heads up: in reality, when used in conjunction with a relatively-placed parent, an element absolutely positioned in an (X)HTML document can be very helpful. This is especially true where itís necessary to overlap multiple containers or keep a fixed distance in pixels between them. Common uses of the relative/absolute tandem include, among other things, the construction of drop-down menus, CSS-based tooltips, and more.

So, if the topic has caught your attention, over the course of this article series Iím going to demonstrate how to use this rather tricky combination for developing the aforementioned user interface elements, and best of all, without having to appeal to the complexities of JavaScript. Letís jump in!

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