Popover
Aquí tienes la traducción del archivo fuente de la guía de diseño al español, manteniendo un tono natural y conservando los componentes MDX, bloques de código y términos técnicos:
Un popover es una información que aparece al pasar el cursor sobre un elemento, al hacer clic en él o al enfocarlo con el teclado.
Se utiliza para proporcionar contexto o detalles adicionales sin salir de la pantalla actual. El popover mejora la experiencia del usuario al ofrecer acceso rápido a la información requerida sin saturar la interfaz principal.
Tipos de popover
Info
Para usar en interfaces regulares
Especial
Para usar en promociones
Anuncio
Úsalo para un resaltado moderado en anuncios y notificaciones
Parámetros
Los siguientes parámetros se pueden configurar para todos los tipos de Popover: Info, Especial y Anuncio:
- Tamaños
- Tipo de contenido
- Posicionamiento
- Botón "Cerrar"
- Método de apertura y cierre
- Temporización
Tamaños
Los tamaños del componente varían en tamaño de fuente y márgenes respecto a los bordes. El ancho y la altura del componente se adaptan para ajustarse al contenido.
S tiene un tamaño de fuente de 13 px y márgenes laterales de 16 px
L tiene un tamaño de fuente de 15 px y márgenes laterales de 24 px
Tipo de contenido
El componente admite los siguientes elementos:
- Encabezado
- Descripción
- Botones de acción (puedes usar uno o dos botones, y alternar botones)
- Icono de cierre
- Pin (cola) es un indicador adicional de un enlace al elemento de la interfaz. Ayuda cuando hay muchos elementos alrededor y necesitas enfocar la atención del usuario en uno específico.
Posicionamiento
El popover puede aparecer en diferentes lados del elemento, dependiendo de su posición en la interfaz. Si usas el pin, este se dirigirá hacia el centro del elemento de la interfaz.
Botón "Cerrar"
Utiliza el botón "Cerrar" para cerrar el popover si lo activas haciendo clic en lugar de pasar el cursor o enfocar el elemento de la interfaz.
Método de apertura y cierre
- Al pasar el cursor sobre el elemento En este caso, el componente desaparece cuando el usuario saca el cursor del elemento.
- Al hacer clic en el elemento Usa un icono de cruz para cerrar el componente en este caso.
- Al enfocar el elemento con el teclado El popover desaparece cuando el elemento pierde el foco.
- Puede abrirse espontáneamente Cuando el usuario llega a la página, el Popover ya estará abierto. Adecuado para popovers en anuncios y tutoriales. Usa el icono de cruz para cerrar el componente.
- En respuesta a cualquier acción en la interfaz Por ejemplo, en el onboarding, cuando proporcionas una serie de popovers.
Temporización
- Sin retrasos en la aparición y desaparición El popover se abrirá y cerrará instantáneamente. Adecuado para popovers regulares simples.
- Con un retraso en la aparición y desaparición Usa un retraso en la aparición si tu página incluye muchos elementos que activan popovers. Ayuda a evitar pasar el cursor accidentalmente sobre elementos y popovers no deseados. Usa el retraso de cierre si el tooltip contiene botones. En este caso, el usuario puede mover el cursor al botón antes de que el tooltip se cierre.
- Con un retraso en la desaparición Usa esta opción cuando no necesites retrasar la aparición, pero tu popover contenga botones.
Casos especiales
En la mayoría de los casos, el popover es una buena opción para proporcionar información adicional. Sin embargo, en ciertos casos, se deben preferir otros componentes.
- Si tienes un tooltip complejo y el número de elementos admitidos dentro del componente Popover no es suficiente, puedes diseñar el tooltip basándote en el componente Popup.
- Si necesitas proporcionar al usuario una explicación o información adicional sobre una acción al hacer clic en un botón, evita el Popover. Usa Action Tooltip o Tooltip en su lugar.