Tutorial Como Crear Tooltips Modernos Solamente

Inicio Libros Tutoriales Eventos Foro Buscar
Cmo crear tooltips modernos

solamente con CSS
Los tooltips son los "globos de ayuda" que aparecen al posicionar el ratn sobre un
determinado elemento. ltimamente se estn poniendo de moda en el diseo web
porque permiten aadir mucha informacin til a un sitio o aplicacin web sin tener que
"ensuciar" demasiado la interfaz.
Siempre ha sido posible crear tooltips solamente con CSS, sin necesidad de utilizar
ninguna librera JavaScript. Sin embargo, antes de CSS 3 este tipo de tooltips eran muy
rudimentarios y por eso muchos diseadores recurran a soluciones basadas en
JavaScript. En este artculo vamos a hablar sobre Hint.css la librera para crear tooltips
modernos exclusivamente con CSS.
Instalacin
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Puedes descargar esta librera usando varias alternativas:
Descargar el archivo CSS minimizado desde el repositorio del proyecto.
Usar Bower: bower install hint.css
Usar npm: npm install --save hint.css
Enlazar directamente el archivo de alguna CDN:

http://www.jsdelivr.com/#!hint.css o
https://cdnjs.com/libraries/hint.css
Una vez descargado, no olvides enlazar el archivo hint.min.css o aadirlo a la tarea

automatizada que crea el archivo con los estilos de tu sitio o aplicacin.
La librera hint.css aade 1.5 KB de peso a tu sitio web (una vez minimizado y
comprimido). Puede parecer mucho para una simple librera de tooltips, pero como
vers ms adelante, tiene muchas opciones de configuracin. Adems, cualquier librera
JavaScript avanzada tendr un tamao similar o superior.
Uso bsico
El siguiente ejemplo muestra cmo crear un tooltip sencillo:


pasa el ratn por encima

En primer lugar, encierra el texto visible con un elemento HTML (por ejemplo un )
donde se configura el tooltip. Despus, aade la clase hint--top (cuidado porque tiene
dos guiones medios) para que la librera cree el tooltip. Por ltimo, aade el texto que se
ver en el globo de ayuda dentro de un atributo llamado data-hint .
Si ves el ejemplo anterior en cualquier navegador, este ser el resultado:
Opciones de configuracin
La librera hint.css dispone de varias opciones de configuracin para crear tooltips de
todo tipo. Estas opciones se activan aadiendo ms clases CSS al elemento que muestra
el tooltip.
Posicin
El "globo de ayuda" del tooltip se puede mostrar en ocho posiciones diferentes, cada una
de las cuales se corresponde con una de estas clases CSS:
hint--top-right
hint--top
hint--top-left
hint--bottom-right
hint--bottom
hint--bottom-left
hint--right
hint--left
En la prctica, as se ve cada posicin en un navegador:
Colores y estilos
Los tooltips se pueden mostrar en cuatro colores diferentes, que se corresponden con
los cuatro estados tpicos de las libreras CSS ms populares, como por ejemplo
Bootstrap:
hint--error
hint--error
hint--info
hint--warning
hint--success
De esta manera, para convertir el tooltip anterior en un mensaje de error, aade lo

siguiente:

pasa el ratn por encima

Por otra parte, tooltip muestra por defecto bordes rectangulares. Si prefieres bordes
redondeados, aade la clase hint--rounded .
Animaciones
El comportamiento por defecto hace que el "globo de ayuda" que estaba oculto aparezca
con una pequea animacin. Este comportamiento tambin se puede modificar segn
tus necesidades:
hint--always , para mostrar el tooltip siempre visible, sin que haya que pasar el
ratn por encima.
hint--no-animate , para mostrar el tooltip inmediatamente sin esperar a la

pequea animacin de entrada.
hint--bounce , para modificar la animacin inicial y hacer que el tooltip haga un

pequeo rebote.
En la siguiente imagen puedes ver el comportamiento de cada tipo de animacin:
Recursos tiles
Sitio web oficial de hint.css
Repositorio oficial del proyecto en GitHub
Sobre el autor
Este artculo ha sido publicado por Javier Eguiluz.
Comentarios
3 Comentarios LibrosWeb
1 Acceder
Ordenar por los mejores

Recomendar 2 Compartir
nete a la conversacin...
Cristyan Valera hace 6 meses

Muy buena la herramienta!
Responder Compartir
sabe hace un ao
good
Responder Compartir
Eugenio Avila hace un ao

Muy interesante este articulo. Gracias
Responder Compartir
TAMBIN EN LIBROSWEB
La nueva API para codificar contraseas de PHP Los generadores de PHP 5.5
5.5 1 comentario hace un ao
2 comentarios hace un ao Higinio Fuentes Gracias!Lastima que empiezen con
Javier Eguiluz Para aumentar la seguridad de las PHP 5.5 :(
contraseas generadas, estas incluyen un valor
aleatorio llamado "salt". Por eso cada vez
Los cdigos de estado de HTTP El proceso de rediseo de LibrosWeb.es

1 comentario hace un ao 2 comentarios hace un ao
Martha Villacis Excelente post. Felicitaciones muy Evert Cruz Reyes Hola que tal, muy buena tu
bueno. y gracias por compartir esta informacin, no tengo
mucha experiencia y esto me ha sido
Suscrbete d Aade Disqus a tu sitio web Privacidad
Fecha de publicacin
12 de febrero de 2016
ETIQUETAS POPULARES
composer css diseo html javascript php programacin sistemas symfony
SUSCRBETE GRATIS
RSS Todos los tutoriales
RSS Tutoriales de diseo
RSS Tutoriales de programacin
3.756
2006-2017 LibrosWeb.es Contacto Novedades Condiciones Privacidad
das online

Tutorial Como Crear Tooltips Modernos Solamente

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tutorial Como Crear Tooltips Modernos Solamente

Transféré par

Droits d'auteur :

Formats disponibles

Inicio Libros Tutoriales Eventos Foro Buscar

Cmo crear tooltips modernos

Descargar el archivo CSS minimizado desde el repositorio del proyecto.

Usar Bower: bower install hint.css

Usar npm: npm install --save hint.css

Enlazar directamente el archivo de alguna CDN:

Una vez descargado, no olvides enlazar el archivo hint.min.css o aadirlo a la tarea

<span class="hint--top" data-hint="Lorem Ipsum Dolor Sit Amet">

Si ves el ejemplo anterior en cualquier navegador, este ser el resultado:

En la prctica, as se ve cada posicin en un navegador:

De esta manera, para convertir el tooltip anterior en un mensaje de error, aade lo

<span class="hint--bottom hint--error" data-hint="Lorem Ipsum Dolor Sit A

hint--no-animate , para mostrar el tooltip inmediatamente sin esperar a la

hint--bounce , para modificar la animacin inicial y hacer que el tooltip haga un

En la siguiente imagen puedes ver el comportamiento de cada tipo de animacin:

Repositorio oficial del proyecto en GitHub

Ordenar por los mejores

Cristyan Valera hace 6 meses

Eugenio Avila hace un ao

Los cdigos de estado de HTTP El proceso de rediseo de LibrosWeb.es

Suscrbete d Aade Disqus a tu sitio web Privacidad

RSS Tutoriales de diseo

RSS Tutoriales de programacin

Vous aimerez peut-être aussi