Los tooltips son los "globos de ayuda" que aparecen al posicionar el ratón sobre un determinado elemento. Últimamente se están poniendo de moda en el diseño web porque permiten añadir mucha información útil a un sitio o aplicación web sin tener que "ensuciar" demasiado la interfaz.
Siempre ha sido posible crear tooltips solamente con CSS, sin necesidad de utilizar ninguna librería JavaScript. Sin embargo, antes de CSS 3 este tipo de tooltips eran muy rudimentarios y por eso muchos diseñadores recurrían a soluciones basadas en JavaScript. En este artículo vamos a hablar sobre Hint.css la librería para crear tooltips modernos exclusivamente con CSS.
Instalación
Puedes descargar esta librería 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.cssohttps://cdnjs.com/libraries/hint.css
Una vez descargado, no olvides enlazar el archivo hint.min.css o añadirlo a la tarea automatizada que crea el archivo con los estilos de tu sitio o aplicación.
La librería hint.css añade 1.5 KB de peso a tu sitio web (una vez minimizado y comprimido). Puede parecer mucho para una simple librería de tooltips, pero como verás más adelante, tiene muchas opciones de configuración. Además, cualquier librería JavaScript avanzada tendrá un tamaño similar o superior.
Uso básico
El siguiente ejemplo muestra cómo crear un tooltip sencillo:
<span class="hint--top" data-hint="Lorem Ipsum Dolor Sit Amet">
pasa el ratón por encima
</span>En primer lugar, encierra el texto visible con un elemento HTML (por ejemplo un <span>) donde se configura el tooltip. Después, añade la clase hint--top (cuidado porque tiene dos guiones medios) para que la librería cree el tooltip. Por último, añade 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 configuración
La librería hint.css dispone de varias opciones de configuración para crear tooltips de todo tipo. Estas opciones se activan añadiendo más clases CSS al elemento que muestra el tooltip.
Posición
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-righthint--tophint--top-lefthint--bottom-righthint--bottomhint--bottom-lefthint--righthint--left
En la práctica, así se ve cada posición en un navegador:
Colores y estilos
Los tooltips se pueden mostrar en cuatro colores diferentes, que se corresponden con los cuatro estados típicos de las librerías CSS más populares, como por ejemplo Bootstrap:
hint--errorhint--infohint--warninghint--success
De esta manera, para convertir el tooltip anterior en un mensaje de error, añade lo siguiente:
<span class="hint--bottom hint--error" data-hint="Lorem Ipsum Dolor Sit Amet">
pasa el ratón por encima
</span>
Por otra parte, tooltip muestra por defecto bordes rectangulares. Si prefieres bordes redondeados, añade la clase hint--rounded.
Animaciones
El comportamiento por defecto hace que el "globo de ayuda" que estaba oculto aparezca con una pequeña animación. Este comportamiento también se puede modificar según tus necesidades:
hint--always, para mostrar el tooltip siempre visible, sin que haya que pasar el ratón por encima.hint--no-animate, para mostrar el tooltip inmediatamente sin esperar a la pequeña animación de entrada.hint--bounce, para modificar la animación inicial y hacer que el tooltip haga un pequeño rebote.
En la siguiente imagen puedes ver el comportamiento de cada tipo de animación:
Recursos útiles
Sobre el autor
Este artículo ha sido publicado por Javier Eguiluz.