Tooltips con CSS

Los tooltips son descripciones emergentes que ayudan a dar un mejor entendimiento sobre el contenido que se lee. Algo muy parecido en HTML es el atributo title que hace lo mismo, muestra una descripción de un enlace, una palabra o una imagen, por ejemplo este texto.

Los tooltips son y hacen lo mismo que el atributo title pero a diferencia de éstos últimos se pueden personalizar la forma, el color de fondo, el texto, etc.

Hay muchas maneras de ponerlos, y por la red abundan muchos scripts que incluso pueden darle algún efecto adicional.

En este primer caso vamos a ver cómo crear tooltips usando sólo CSS sin nada de Javascript para no hacer la página más lenta y pesada.
Puedes ver el resultado pasando el cursor aquíEste es un tooltip hecho sólo con CSS. El mensaje se mostrará sólo al pasar el cursor y desaparecerá al quitar el cursor de encima..

El método es muy simple, fácil de hacer y personalizable, sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> pegas lo siguiente:

a.tooltip { /* Estilos del texto que tiene el tooltip */
position: relative;
z-index: 24;
cursor: help;
text-decoration: underline;
}
a.tooltip:hover {z-index: 25; text-decoration: none;}
a.tooltip span {display: none}
a.tooltip:hover span { /* Estilos de la descripción */
display: block;
position: absolute;
top: 2em; left: 2em;
width: 16em;
border: 1px solid #0cf;
background: #ECE0F8;
color: #000;
text-align: center;
}

Y ahora siempre que quieras usar un tooltip usa este código dentro de tus entradas:

<a class="tooltip">Pasa el cursor aquí<span>Este es el mensaje que se mostrará al pasar el cursor.</span></a>

En el código sólo hay tres cosas a tomar en cuenta, lo que está en negrita siempre se debe poner para que aparezcan los estilos del tooltip; lo que está en azul es el texto al que se le pasará el cursor encima; y lo que está en color rojo es la descripción.