Tooltips con puro CSS3

[dual3nigma]

Hola!!!! Sigo sin poder dormir, así que les traigo un experimento más!!! :D

Hace poco estaba trabajando en el administrador de un sitio al que afortunadamente no hubo que darle soporte a IEs. Así que hice estos tooltips en un abrir y cerrar de ojos gracias a CSS3, nada de js. El código lo pueden descargar de aquí: https://github.com/dual3nigma/HTML5-...aster/tooltips



En el markup encontraran que estoy utilizando un span con un atributo [data-tip], en la antiguedad se acostumbraba usar el atributo title para poner el contenido del tip, pero HTML5 define una forma de utilizar atributos propios así data-*

Código Jade:

span(data-tip="Es una pequeña descripción que siempre se muestra en el listado de items.")
 

El CSS no podría ser más simple, el truco es utilizar el :hover:after para generar el contenedor y obteniendo el texto del tooltip gracias a attr(data-tip):

Código Stylus:

&:hover:after
        content attr(data-tip)
 

Espero les sea útil ;) y hagan sus propios experimentos, se divertirán mucho :D

Saludos

[roccons]

Funciona y se ve genial en todos los demás navegadores, y en verdad que es simple el código. El archivo .jade es completamente innecesario ¿cierto?

[rogertm]

Ahora mismo estaba leyendo sobre el tema -> http://css-tricks.com/14950-bubble-p...h-css3-jquery/ Pero de esta manera que lo haces es muy sencillo...

Me viene muy bien para un proyecto que estoy haciendo...

Gracias por compartir. Saludos.