Información sobre herramientas vs. Tarjeta flotante
Un tooltip muestra una etiqueta o pista corta. Una hover card muestra una vista previa más completa de una persona, elemento o enlace.
Usa una descripción emergente cuando unas pocas palabras sean suficientes. Usa una tarjeta flotante cuando una vista previa pueda evitar ir a otra página. También debe funcionar con teclado y tacto.
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
Información sobre herramientas
Un tooltip es una nota corta sobre un control. Se abre cuando pasas el mouse o usas el teclado para enfocarlo. No se puede usar como un botón.
role="tooltip"Cuando un botón de icono recibe el foco del teclado, aparece “Copiar enlace”. El foco permanece en el botón.
- Úsalo cuando
- Úselo para explicar una etiqueta de control corta tanto al pasar el ratón como al enfocar con el teclado.
- No lo uses cuando
- Nunca pongas acciones, instrucciones que deben leerse, o contenido largo dentro de una información sobre herramientas (tooltip).
- Nombre usado en código
role="tooltip"
Tarjeta flotante
Una tarjeta flotante es una vista previa detallada. Se abre al pasar el mouse o hacer foco en una referencia, sin bloquear la página.
HoverCardPasa el cursor sobre el nombre de un autor para ver una breve biografía y el número de seguidores. El perfil completo permanece cerrado.
- Úsalo cuando
- Úsalo para detalles opcionales de vista previa que ayudan a las personas a elegir a dónde ir después.
- No lo uses cuando
- Nunca ocultes información requerida tras un hover, porque los dispositivos táctiles pueden no abrirla de manera fiable.
- Nombre usado en código
HoverCard
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| Información sobre herramientasTooltip | Úselo para explicar una etiqueta de control corta tanto al pasar el ratón como al enfocar con el teclado. | Nunca pongas acciones, instrucciones que deben leerse, o contenido largo dentro de una información sobre herramientas (tooltip). | role="tooltip" |
| Tarjeta flotanteHover Card | Úsalo para detalles opcionales de vista previa que ayudan a las personas a elegir a dónde ir después. | Nunca ocultes información requerida tras un hover, porque los dispositivos táctiles pueden no abrirla de manera fiable. | HoverCard |
Antes de lanzarlo
- 01
Escribe lo que la persona necesita hacer.
- 02
Probar el teclado, enfoque, tacto, zoom, carga, estados vacíos y de error.
- 03
Asegurarse de que las personas puedan obtener la misma información sin pasar el cursor o movimiento.
- 04
Probar con contenido real en pantallas pequeñas y grandes.
Petición de comparación que puedes copiar
Copia esto cuando tu equipo necesite ayuda para elegir entre los patrones.
Elige el mejor patrón de Información sobre herramientas (Tooltip), Tarjeta flotante (Hover Card) para nuestro flujo de usuario real. Usa esta regla: Un tooltip muestra una etiqueta o pista corta. Una hover card muestra una vista previa más completa de una persona, elemento o enlace. Anota la tarea, la cantidad de contenido y el costo de detener el flujo. Comprueba el teclado, toque, carga, errores y movimiento reducido. Explica tu elección y luego crea la versión accesible más pequeña usando el sistema de diseño del proyecto.