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.

En este ejemplo puedes ver el funcionamiento de los toltips hechos con CSS cuando pases el mouse sobre este link.Tootltip o Ayuda Emergente
al pasar sobre cualquier enlace.

En la hoja de estilos se puede modificar la apariencia que tendrá el tootlip.

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