Oncemade

Here is how to create a very basic tooltip using only CSS. I've been using this technique all over my latest project.

Let's start by creating the following markup:

Markup

CSS

As I mentioned in a previous article, IE doesn't support RGBa. Adding the following styles, wrapped in a conditional comment, will make it work.

IE CSS

For more info about creating speech bubble using only CSS, go to DeSandro's tutorial on creating speech bubble.

One of the best progressive enrichment that I use on my projects is to set colors as RGBa (red, green, blue, alpha) values. As I write this, RGBa is current supported in firefox 3.0.5+, Safari 2+, Chrome 1+, and Opera 10+.

The most efficient way that I found to declare RGBa values is to separate the flat colors into code block, and keeping RGBa with the other styles. Like in this example:

CSS

I always keep the flat colors separated because they can be easily removed when the other browsers start supporting RGBa. Why didn't I declare the HEX colors on the same line as the RGBa? Simple! IE doesn't support it; no color will be rendered at all. Note: Please be aware that the RGBa colors have to be the last ones declared.

Read more …