Cómo crear tooltips modernos solamente con CSS

12 de febrero de 2016

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.css o https://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:

Tooltip por defecto creado con hint.css

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-right
  • hint--top
  • hint--top-left
  • hint--bottom-right
  • hint--bottom
  • hint--bottom-left
  • hint--right
  • hint--left

En la práctica, así se ve cada posición en un navegador:

Posiciones definidas por hint.css para los tooltips

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--error
  • hint--info
  • hint--warning
  • hint--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>

Tooltip con el estilo de un mensaje de error

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:

Tipos de animaciones definidos por hint.css para los tooltips

Recursos útiles

Sobre el autor

Este artículo ha sido publicado por Javier Eguiluz.