Todo Para el WebMaster: ToolTips Personalizados con CSS

es una herramienta de ayuda visual, que funciona al situar o pulsar con el ratón sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

En este post vamos a crear tooltip personalisados utilizando solo CSS.

Como Primera acción veamos en detalle el codigo CSS, este es el corazón y pulmón de nuestros ToolTips.
Como veran el codigo es bastante simple para quienes conocen lo minimo de CSS.

a.tooltip { /*Propiedades del texto visible*/
position
determina la forma en que se ubica un elemento.

RELATIVE: es el valor por defecto.

ABSOLUTE: se lo fuerza a ubicarse en un determinado lugar.
: relative; /* posición */
text-decoration: none !important; /* Eliminamos el subrayado */
color:#0080C0 !important; /* Cambiamos el color de texto */
font-weight:bold !important; /* negritas al texto */
}

a.tooltip:hover
Define el estilo cuando el ratón pasa sobre él.
{/*Hace aparecer el cuadro*/
z-index
Número de orden dentro de la pila de elementos
como los elementos pueden ubicarse en posiciones absolutas dentro
de la página, algunos pueden superponerse visualmente con otros,
para controlar cuál estará por encima, les asignamos un número entero,
cuanto más alto sea el número, más arriba estará.
:999; /* Definimos que este por encima de todo */
background-color:#000000; /* obligatorio definir color de fondo */
}

a.tooltip span { /* Ocultamos el elemento */
display
establece si un elemento será mostrado y cómo será mostrado

BLOCK: un salto de línea antes y después del elemento

INLINE: ningún salto de línea antes ni después del elemento

NONE: no se mostrará
: none;
}

a.tooltip:hover span { /*Propiedades del cuadro*/
display
establece si un elemento será mostrado y cómo será mostrado

BLOCK: un salto de línea antes y después del elemento

INLINE: ningún salto de línea antes ni después del elemento

NONE: no se mostrará
: block; /* se muestra el cuadro */
position
determina la forma en que se ubica un elemento.

RELATIVE: es el valor por defecto.

ABSOLUTE: se lo fuerza a ubicarse en un determinado lugar.
: absolute; /* posicion de cuadro */
top:2em; left:2em;
width:250px; /* ancho del cuadro */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #0080C0; /* color de fondo*/
color: #FFFFFF; /* color del texto */
}