Let's start by creating the following markup:

Markup
<a href="http://www.example.com" class="tooltip">
 My Link 
 <span>Cool tooltip<small></small></span>
</a>

CSS
.tooltip { position: relative; }
.tooltip span {
  position: absolute;
  right: 0;
  top: -35px;
  display: none;
  min-width: 50px;
  padding: 3px 8px;
  white-space: nowrap;
  font-size: 11px;
  text-align: center;
  background-color: rgba(0,0,0,.8);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.tooltip span small {
  position: absolute;
  right: 10px;
  bottom: -6px;
  border-top: 6px solid rgba(0,0,0,.8);
  border-left: 6px solid transparent;
}
.tooltip:hover span { display: block; }

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
.tooltip span { background-color: #000; }
.tooltip span small { border-top: 6px solid #000; }
IE 6 Tooltip Arrow Fix
*html .tooltip span small { 
  border-left: 6px solid #363636; /* Match the color of the background */
} 

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

Demo

My Link Cool Tooltip
Long Tip Test Very Long Tooltip Test Very Long Tooltip Test

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
/* NON RGBa BROWSERS
  ------------------------------------------------------ */
#wrap { background-color: #000; }
#footer,
#header { background-color: #ccc; }
.section { color: #fff; }

/* HEADER
  ------------------------------------------------------ */
#header { background-color: rgba(204,204,204,.8); }
#header ul { float: right; }
#header li {
  float: left;
  margin-left: 1em;
}
#header li:first-child { margin-left: 0; }

/* WRAP
  ------------------------------------------------------ */
#wrap {
  width: 960px;
  margin: 0 auto;
  background-color: (0,0,0,.7);
}
.section {
  padding: 1em;
  color: rgba(255,255,255,.9);
}

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.

DOESN'T WORK IN IE
/* HEADER
  ------------------------------------------------------ */
#header {
  background-color: #ccc;
  background-color: rgba(204,204,204,.8);
}

Last but not least, when I use border's shorthand syntax, I declare it with the flat colors first, and then border-color afterward. See the example bellow for better understanding.

CSS
/* NON RGBa BROWSERS
  ------------------------------------------------------ */
#header { border: 1px solid #000; }

/* HEADER
  ------------------------------------------------------ */
#header { border-color: rgba(0,0,0,.7); }

Browser Support

• Firefox 3.0+
• Safari 3.0+
• Chrome 1+
• Opera 10+