Popover

• Agrupar acciones secundarias: mostrarlas ancladas a un disparador de opciones cuando no hay espacio para incluirlas en línea. Ej.: "Editar", "Archivar" y "Eliminar" en una fila de una lista.
• Editar un valor sin salir del contexto: resolver una edición puntual sin abrir un modal ni navegar a otra pantalla. Ej.: ajustar el stock de un producto desde la propia fila del listado.
• Mostrar subsecciones del menú: desplegar las opciones anidadas cuando el Menu principal se muestra colapsado. Ej.: al pasar el mouse sobre "Productos" colapsado, mostrar "Lista de productos", "Inventario", "Categorías", "Suscripciones" y "Tablas de precios".
• Desplegar filtros contextuales: aplicar selecciones rápidas sobre una vista. Ej.: ordenar un listado por fecha más o menos reciente.

• Mostrar un texto de ayuda breve: un tip corto sobre un elemento, sin acciones ni contenido interactivo. En su lugar, usar Tooltip. Ej.: aclarar qué hace un ícono.
• Interrumpir el flujo para una tarea de foco completo: un formulario extenso o una decisión que requiere toda la atención de la persona. En su lugar, usar Modal. Ej.: confirmar la eliminación de un recurso.
• Elegir un valor dentro de un formulario: una opción que forma parte de la carga de datos. En su lugar, usar Select. Ej.: elegir el país en un campo de dirección.

1. Surface: el fondo, el borde redondeado y la sombra de la caja flotante que la despegan del contenido detrás.
2. Content: los elementos que se muestran dentro de la caja, como una lista de acciones o un dato complementario.
3. Arrow: indicador opcional que apunta al disparador para reforzar el vínculo entre ambos; se controla con arrow (visible por defecto).

El uso más frecuente es como menú de acciones contextuales sobre cada fila de una lista o de una tabla, anclado a un disparador de opciones (position="bottom-end" es habitual cuando el disparador está alineado a la derecha). El popover se abre por clic y se cierra al elegir una opción o al hacer clic fuera de la caja; el estado de visibilidad suele controlarse por fila con visible y onVisibility.

Conviene activar renderOverlay para que un toque accidental no alcance los elementos que quedan detrás de la caja mientras está abierta: es el patrón que evita, por ejemplo, disparar la acción de una fila al tocar fuera del menú para cerrarlo. El disparador debe ofrecer un área táctil cómoda; un disparador de opciones la cumple.

• Disparador como control real: el disparador debe ser un elemento interactivo (Button, IconButton o Link), no un texto o una caja sin rol, para que reciba foco por teclado y anuncie su función.
• Etiqueta en disparadores solo ícono: cuando el disparador es un IconButton, incluir un aria-label que describa qué acción abre. Ej.: "Más acciones".
• Cierre con teclado y clic fuera: con enabledDismiss (activado por defecto) el popover se cierra con la tecla Esc y al hacer clic fuera de la caja; no desactivarlo sin ofrecer otra forma de cerrarlo.
• Foco visible en el contenido: los controles dentro de la caja reciben foco y muestran su anillo; mantener un orden de foco lógico y no anular ese anillo con estilos propios.
• Overlay para evitar interacciones accidentales: activar renderOverlay cuando un clic fuera de la caja no deba alcanzar los elementos que quedan detrás, algo especialmente relevante en pantallas táctiles.
• Abrir mediante clic/tap los popovers con acciones: esto permite que la caja permanezca abierta mientras la persona elige.

Instalá el componente vía terminal.

Las propiedades adicionales se pasan al elemento <Popover>. Consultá la documentación del elemento div para ver la lista de atributos aceptados.

• Tooltip — Para mostrar un texto de ayuda breve sobre un elemento, sin acciones.
• Modal — Para interrumpir el flujo con una tarea de foco completo o una decisión.
• Select — Para elegir un valor dentro de un formulario.

Popover