Como crear los Tooltip con CSS

Este es un sencillo ejemplo en el que muestro como implementar con css los famosos «tooltips» personalizados (ayuda emergente) que aparecen al pasar con el cursor sobre cualquier enlace usando una etiqueta SPAN.

Este ejemplo permite crear tooltips personalizados utilizando las hojas de estilo (css). Como se trata de html y css, resulta muy fácil definir los colores de fondo y borde que tendra el cuadro, la tipografía, el tamaño y la ubicación de cada uno de los tooltips que usemos.

El texto que esta dentro de la etiqueta SPAN será lo que aparezca como ayuda emergente al pasar el cursor sobre el link. Este es el html donde esta el enlace, que puede ser una imagen o cualquier objeto, siempre que este conetenido dentro de un link.

En este ejemplo puedes ver el funcionamiento de los toltips 
hechos con CSS cuando pases el mouse <a class=info href="#">sobre este link.<span>Hola. Soy la ayuda Emergente</span></a>

En la hoja de estilos se puede modificar la apariencia que tendrá el tootlip. Este es el codigo CSS necesario.

a.info{position:relative;
    z-index:24;
    background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none} /* ocultar el SPAN */

a.info:hover span{ /* Mostrar el span cuando paso por el link */
    display:block;
    position:absolute;
    top:2em; left:1em;
    width:16em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}

Descargar ejemplo completo
Tamaño de la descarga: 1 Kb