Tooltips en diseño UX: cuándo usarlos (y cuándo no) con ejemplos

Un tooltip puede parecer sencillo, porque se trata de un pequeño recuadro de texto que aparece cuando el usuario pasa el cursor por encima de algún elemento (hace hover) o hace tap si es un dispositivo móvil.

Suelen ser pequeños, y este es justamente el problema: implementarlos parece mejorar la experiencia de usuario, pero a veces lo que hace es tapar otros problemas.

En este artículo te explico no solo qué es un tooltip, sino cuándo NO deberías usar uno. Porque muchas veces, añadir un tooltip es tapar un problema de diseño en lugar de resolverlo.

1. Qué es un tooltip y su anatomía
2. Cuándo se utiliza un tooltip, con ejemplos
3. Buenas prácticas en el uso de tooltips
4. Tooltips y accesibilidad
5. Errores comunes con tooltips
6. Apuntes finales

Qué es un tooltip y su anatomía

Como te decía al inicio del artículo, un tooltip es un pequeño mensaje emergente que aparece cuando un usuario interactúa con un elemento, generalmente al pasar el cursor por encima o al hacer clic en él.

Su función principal es proporcionar información adicional sin sobrecargar la interfaz, por lo que suelen ser útiles para aclarar iconos, explicar funciones o dar contexto sobre ciertos elementos sin ocupar espacio permanentemente.

La anatomía de un tooltip es simple:

1. Es el contenedor. Suele tener un fondo que separa visualmente el tooltip del elemento de la interfaz que está por debajo.
2. El texto. A veces puede tener un título, pero no es obligatorio.
3. Flecha. Es la conexión con el tooltip y el elemento de la interfaz que lo ha disparado. Sin ella, a menudo es difícil entender de dónde sale.

No suelen tener ningún enlace o llamada a la acción, porque como se muestran al hacer hover, no sería posible mover el ratón y hacer clic en el enlace: este habrá desaparecido.

Cuándo hay que utilizar un tooltip (con ejemplos)

Escoger cuándo utilizar un tooltip y cuando no, no es tarea fácil. Como regla general:

1. No utilices un tooltip si la información que muestras es vital para que el usuario pueda completar la tarea. Por ejemplo, las características que debe tener una contraseña no debería ser algo oculto.
2. Utilízalos para facilitar información de ayuda que no es redundante con lo que ya se ve en la interfaz. Si lo haces, ya no será un tip (consejo).
3. Asegúrate de que se muestra al hacer hover (en un dispositivo de escritorio) y con un tap (clic) en un dispositivo móvil.
4. Sé consistente, y utiliza un solo diseño para tus tooltips.

Como verás en los ejemplos de abajo, hay muchas maneras de diseñar y de implementar un tooltip. Te dejo con algunas capturas de productos reales que te permitirán identificar mejor las diferentes variaciones.

Outseta utiliza un tooltip muy pequeño que solo contiene una palabra y un icono. En este caso concreto, sirve para explicar cómo funciona un componente:

En este ejemplo de Stripe vemos un ejemplo bastante común de un tooltip: sirve para mostrar el detalle de la información de un gráfico. Es una buena manera de mostrar solo la información que el usuario necesita sin incluirla toda de forma visible a la primera.

En este caso, también de Stripe, vemos como se utiliza el tooltip para comunicar al usuario que puede utilizar un atajo de teclado en lugar de hacer clic en el icono de copiar 📋

Hay algunas ocasiones en las que el tooltip se utiliza para complementar un icono. Es el caso de Spotify, que como solo utilizan un icono para «añadir una canción a la lista de ‘Me gusta’», necesitan un tooltip para que quede más claro:

Zendesk utiliza un tooltip un tanto excesivo (tiene mucho texto) como parte de su onboarding:

El tipo de tooltip que utiliza Klaviyo en el ejemplo de abajo no me gusta especialmente, porque se dispara cuando la página carga por primera vez, y sin que el usuario haya interactuado con nada. Si no están bien implementados, a veces bloquean la navegación, y esto afecta negativamente la experiencia del usuario.

El caso de Wellfound es similar al segundo ejemplo de Stripe que hemos visto más arriba, pero en este caso sirve como confirmación de que la acción de copiar ha funcionado:

Netflix y otras plataformas multimedia utilizan el tooltip para mostrarle al usuario una pequeña miniatura de la pelicula o serie que están viendo. Es particularmente útil cuando estás rebobinando, porque te da más información.

Por último tenemos Navan con un caso de uso bastante común: ampliar información. La información que se muestra de inicio es suficiente, pero para usuarios más inexpertos puede ser insuficiente. Utilizan tooltips para comunicar más detalles:

Buenas prácticas en el uso de tooltips

La posición del tooltip es importante. Comprueba que al mostrarse no tapa información relevante para el usuario, como un titular, el texto que ya han introducido en un input o un botón:

Lo mismo sucede cuando se trata de los iconos de la navegación:

Relacionado con la accesibilidad: asegúrate de que el texto tiene un contraste adecuado con el fondo del tooltip:

Como te decía al inicio, un tooltip debe contener poca información, y esta no debe ser crítica para el usuario:

No suele ser recomendable utilizar tooltips en exceso: en el ejemplo que te muestro debajo, es más fácil añadir un helper que está siempre visible que no componentes radio que tengan todos diferentes tooltips:

Hay ocasiones en las que el elemento interactivo está situado en una esquina, y esto puede requerir que el tooltip aparezca muy cerca del límite de la pantalla. En estos casos debes diseñarlos e implementarlos de manera que no queden cortados:

La accesibilidad de los tooltips

Último, pero no por ello menos importante: como sucede casi siempre, aunque los tooltips (o cualquier otro elemento) son útiles para la mayoría de usuarios, pueden generar problemas colaterales si no se han diseñado e implementado teniendo en cuenta las mejores prácticas en accesibilidad.

Considera estos principios:

• Asegura que sean activables con teclado, no solo con el cursor: Si el usuario navega con Tab y hace focus en un elemento, el tooltip debe aparecer igual que con hover.
• Usa ARIA correctamente. Con tal de que funcionen con los lectores de pantalla, conecta el tooltip con su elemento usando aria-describedby y añade role="tooltip" al contenedor.
• Tiempo de lectura razonable. No hagas que desaparezca automáticamente antes de que el usuario pueda leerlo. Si es persistente, permite cerrarlo con la tecla ESC
• Considera un diseño con buen contraste y tamaños de letra adecuados para mejorar la legibilidad: Recuerda que el texto debe cumplir con un ratio mínimo de 4.5:1 contra el fondo del tooltip.

Errores comunes con tooltips

Estos son los problemas que veo con más frecuencia (y en los que he caído alguna vez, no te voy a engañar):

• El tooltip que tapa lo que describes. Si aparece encima del elemento que explica, el usuario no puede ver ambos a la vez 😁 Posiciónalo siempre de forma que el elemento original siga visible y asegúrate de que el equipo de desarrollo lo implementa adecuadamente.
• Desaparece demasiado rápido. Si el tooltip se oculta antes de que el usuario termine de leer, frustra más que ayuda. Haz lo que indican las heurísticas de Tognazzini: añade un pequeño retraso (100-200ms) antes de ocultarlo.
• Demasiado texto. Un tooltip con un párrafo entero ya no es un «tip». Si necesitas tanto texto, usa un modal o valora si esa información debe aparecer en el propio diseño.
• Oculta información crítica. Poner los requisitos de contraseña en un tooltip obliga al usuario a tener que mover el cursor todo el rato para recordar las características de una buena contraseña mientras la escribe. Si es información necesaria para completar una tarea, debe estar siempre visible.
• No considerar una alternativa para móvil. En móvil no existe el hover. Si tu tooltip solo funciona con hover, los usuarios de móvil no verán esa información.

Apuntes finales

Como conclusión, decir que aunque los tooltips puedan ser una solución útil, hay que ir con cuidado a la hora de diseñarlos e implementarlos. Un exceso de tooltips suele ser síntoma de un diseño que es difícil de entender por sí mismo. En estos casos, es importante pararse un instante y replantear la interfaz.

Aprovechando que has llegado hasta aquí, te recomiendo que evalúes los tooltips que hay en el producto que estás diseñando, y te asegures de que sean la mejor solución posible.