Tooltip a puro CSS

Bueno, siguiendo con los efectos de CSS y las posibilidades que hay en la web, vengo a explicar un poco acerca de los tooltip, estos "tooltip" son los mensajes que nos salen al pasar por cierto enlace, por ejemplo, al colocarle un titulo a una imagen obtenemos lo siguiente:

   Si dejamos el mouse un rato sobre la imagen vemos que se nos muestra un mensaje con le titulo de la imagen, ese es el tooltip, bien, ahora si queremos que ese tooltip tenga un efecto mas agradable y no queremos complicarnos la vida utilizamos CSS, algo simple sería lo siguiente:

a.ToolTip, a.ToolTip:visited {
color:#c00;
position:relative;
z-index:1;
}

a.ToolTip b {
position:absolute;
visibility:hidden;
width:200px;
border:1px solid #000;
left:0;
top: -20px;
}

a.ToolTip:hover {
text-decoration:none;
border:0;
z-index:1000;
}

a.ToolTip:hover b {
visibility:visible;
height:auto;
cursor:pointer;
z-index:500;
}

a.ToolTip:hover b img {
border:0;
}

   Donde tomo por referencia la etiqueta "b" que es para colocar texto en negrita (podemos cambiarla si queremos), modificando el valor top de la clase tooltip (a.ToolTip b) elegimos la posición (el alto) donde aparecera el cuadro. Defino algunos bordes en cero (0) para solventar problemas con Opera e IE.

   Y el HTML es el siguiente:

El parrafo con tooltip
Mostrando el texto del tooltip

Teniendo como resultado...

El parrafo con tooltipMostrando el texto del tooltip

   Esto como siempre es básico, podemos definir mas propiedades, colores y hasta agregar bordes para obtener resultados de mayor impacto visual. Podemos agregar propiedades como sombras y bordes redondeados.

-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 6px 6px 18px #171617;
-moz-box-shadow: 6px 6px 18px #171617;
box-shadow: 6px 6px 18px #171617;
padding:5px 5px 5px 5px;

   El resultado final sería algo como estoProbando texto simple... Funciona!, puedes ver mi logo, y tambien puedes ver una pequeña descripciónAficionado a los juegos FPS, amante del heavy metal y en busca de nuevos avances en la programación... Y porque no hacemos mas, podemos incluso hasta hacer una especie de menú...

Menu 1Prueba 1
Menu 2Prueba 2
Menu 3Prueba 3
Menu 4Prueba 4

   Como dije, las posibilidades son muchas, todo queda a nuestra imaginación...

Recibe notificaciones por correo