Tooltips y ayudas
Redactado por
Sebastian V. Fecha de publicación
19/07/2025
Tiempo de lectura
5 min
Tema
Interactions
¿Qué son los Tooltips?
Los tooltips son pequeños globos informativos y contextuales que aparecen de forma temporal al pasar el cursor o enfocar un elemento de la interfaz. Representan la capa más granular de ayuda al usuario en un producto digital.
¿Para qué sirven?
El diseño moderno abusa de la iconografía para ahorrar espacio, asumiendo que los usuarios entenderán qué hace cada símbolo. Los tooltips son la red de seguridad de la usabilidad que soluciona la ambigüedad.
- Aclarar íconos: Decodificar que un engranaje significa "Configuración" y una estrella "Favoritos".
- Instrucciones rápidas: "La contraseña debe contener 8 caracteres" sobre un campo de texto.
- Información extendida: Mostrar el nombre completo de un usuario al posarse sobre su pequeño avatar circular.
¿Cómo se usan?
La regla de oro de un tooltip es la intencionalidad. Si los tooltips aparecen instantáneamente mientras el usuario mueve velozmente el ratón por la pantalla, generarán un caos visual insoportable de cajas parpadeando. La interacción profesional requiere añadir un transition-delay de entre 300ms y 500ms en el estado de aparición. Solo se muestra si el usuario detiene su cursor intencionalmente para preguntar "¿Qué es esto?".
Consejo profesional
Un buen tooltip usa transition-delay solo en la entrada, pero desaparece instantáneamente en la salida (sin delay). Así evitas que bloqueen la lectura de elementos cercanos cuando el usuario aparta el cursor.
Tooltip con delay intencional
<div class="tooltip-container">
<button class="icon-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="16" x2="12" y2="12" />
<line x1="12" y1="8" x2="12.01" y2="8" />
</svg>
</button>
<div class="tooltip-box">
Información avanzada
</div>
</div>Mantén el ratón medio segundo sobre el botón para revelar el globo.
Errores comunes
Practica lo aprendido
Construye un tooltip con flecha CSS puro que aparezca con delay intencional.