CSS Tooltip

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

html

<a class="tooltip" href="#">
My Link <span>Cool Tooltip<small></small></span>
</a>

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 */
}