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:

Carlitox en la Web

   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...


   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 logoCarlitox en la Web, 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ú...


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

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon