Foros del Web » Creando para Internet » HTML »

Tooltips con puro CSS3

Estas en el tema de Tooltips con puro CSS3 en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/11/2011, 03:59
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 14 años, 1 mes
Puntos: 122
Tooltips con puro CSS3

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:
Ver original
  1. 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:
Ver original
  1. &:hover:after
  2.         content attr(data-tip)

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

Saludos
  #2 (permalink)  
Antiguo 22/11/2011, 12:10
 
Fecha de Ingreso: junio-2004
Ubicación: Coatepec, Veracruz
Mensajes: 80
Antigüedad: 19 años, 9 meses
Puntos: 7
Respuesta: Tooltips con puro CSS3

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?
__________________
HabitatWeb | @roccons
  #3 (permalink)  
Antiguo 22/11/2011, 12:28
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 18 años, 8 meses
Puntos: 638
De acuerdo Respuesta: Tooltips con puro CSS3

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.
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose

Etiquetas: css3, puro
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 6 personas




La zona horaria es GMT -6. Ahora son las 17:47.