Como crear un tool-tip para blogger o cualquier web utilizando solo CSS

Bueno para empezar si te estas preguntando ¿que es un tooltip? pues un tooltip es una cajita con un mensaje que es visible solo cuando pasas el mouse encima de un link

Esto es un tooltip: Pasa el mouse aqui para mas infoEn el tooltip se puede mostrar cualquier informacion extra

Los pasos para crear un tooltip son los siguientes:

1. En Blogger debes ir a Diseño | Edición de HTML y antes de ]]></b:skin> pegas este estilo CSS:

a.tooltip {
position: relative; /* es la posición normal */
text-decoration: none !important; /* forzar sin subrayado */
}

a.tooltip:hover {
z-index:999; /* va a estar por encima de todo */
}

a.tooltip span {
display: none; /* el elemento va a estar oculto */
}

a.tooltip:hover span {
display: block; /* se fuerza a mostrar el bloque */
position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
top:2em; left:2em; /* donde va a estar */
width:250px; /* el ancho por defecto que va a tener */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #66CCFF; /* el color de fondo por defecto */
border: solid 1px #0099FF; /* es el color del borde */
color: #FFFFFF; /* el color de los textos por defecto */
}

2. Ahora que ya tienes el estilo CSS en tu blog lo unico que queda es aprender a usar los tooltip. Para poner un tooltip debes utilizar este codigo html:

<a class="tooltip" href="#">
   Este es el link visible
<span>
   Aqui el texto invisible del tooltip
</span>
</a>

En el codigo del tooltip adentro de los tags <span> </span> no solamente puedes poner texto, tambien puede poner imagenes o cualquier cosa que se te ocurra como estaVicodin
Es un narcotico analgeico que contiene hydrocodone y paracetamol (conocido como acetaminofen) utilizado para aliviar dolores desde moderados a severos.

Fuente | Vagabundia