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
<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