Tooltips con CSS: Más simple, imposible

Hay muchas formas de crear tooltips con CSS; probablemente, esta, que muestra webdesignerdepot.com es una de las más sencillas que existen ya que sólo se requiere establecer una clase en el enlace o etiqueta a la cuál queremos aplicarlas y poner las dos reglas de estilo.

En este caso, la clase la llamamos tooltip pero, puede ser cualquier otro nombre y funcionará en cualquier navegador que admita el uso de los pseudo-elementos :after y :before.

El formato gráfico es completamente configurable así que las variaciones pueden ser casi infinitas.

<style type="text/css">
  .tooltip {
    display: inline;
    position: relative;
  }
  .tooltip:hover:after {
    bottom: 26px;
    content: attr(title); /* este es el texto que será mostrado */
    left: 20%;
    position: absolute;
    z-index: 98;
    /* el formato gráfico */
    background: rgba(255,255,255, 0.2); /* el color de fondo */
    border-radius: 5px;
    color: #FFF; /* el color del texto */
    font-family: Georgia;
    font-size: 12px;
    padding: 5px 15px;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    width: 150px;
  }
  .tooltip:hover:before {
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
    /* el triángulo inferior */
    border: solid;
    border-color: rgba(255,255,255, 0.2) transparent;
    border-width: 6px 6px 0 6px;
  }
</style>

Y se usaría así:

<a href="#" title="este es un ejemplo de tooltip sencillo" class="tooltip">un ejemplo</a>

un ejemplo

El texto que se mostrará es el que se encuentra en el atributo title de la etiqueta; si se quisiera utilizar otro atributo, bastaría cambiar la propiedad content; por ejemplo si se quiere usar rel o href sería:

content: attr(rel);
content: attr(href);

Hay que tener en cuenta que, dada su sencillez, el tooltip se verá "cortado" cuando se queire mostrar en algo que está muy a la derecha si el contenedor donde se encuentra la etiqueta tiene la propiedad overflow: hidden; algo bastante común en muchas plantillas de Blogger.