Panel emergente vs. Tooltip (información sobre herramienta)
Un tooltip ofrece una pista corta. Un popover puede contener más texto, opciones o botones.
Usa una descripción emergente cuando unas pocas palabras sean suficientes. Usa un popover cuando una persona deba leer o hacer más sin salir de la página.
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
Panel emergente
Un popover es un panel pequeño conectado al control que lo abrió. Puede contener contenido estructurado y acciones sin bloquear la página.
popover attribute / PopoverSeleccione un avatar para abrir un perfil pequeño. Muestra el rol de la persona, los datos de contacto y una acción de Seguir.
- Úsalo cuando
- Úselo cuando el contenido pertenezca junto a su activador y las personas puedan seguir usando la página.
- No lo uses cuando
- Nunca lo uses para un aviso corto solo con etiqueta. Usa un tooltip en su lugar.
- Nombre usado en código
popover attribute / Popover
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"
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| Panel emergentePopover | Úselo cuando el contenido pertenezca junto a su activador y las personas puedan seguir usando la página. | Nunca lo uses para un aviso corto solo con etiqueta. Usa un tooltip en su lugar. | popover attribute / Popover |
| 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" |
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 Panel emergente (Popover), Información sobre herramientas (Tooltip) para nuestro flujo de usuario real. Usa esta regla: Un tooltip ofrece una pista corta. Un popover puede contener más texto, opciones o botones. 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.