Popover (cuadro emergente)

Similar a Tooltip, pero puede alojar un título y contenido más rico (estructuras HTML, listas, etc.), y se activa al hacer clic o al pasar el cursor.

Uso básico

Posiciones, formas de activación y flecha

import { LhButton, LhPopover } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhPopover title="Título" content="Este es el contenido del popover." placement="top">
      <LhButton>Arriba</LhButton>
    </LhPopover>
  )
}

Props de Popover

Prop	Descripción	Tipo	Opciones	Predeterminado
children	Nodo activador	ReactNode	—	—
title	Título (se renderiza en la zona __title)	ReactNode	—	—
content	Contenido (se renderiza en la zona __content)	ReactNode	—	—
placement	Posición de visualización	LhPopoverPlacement	top / bottom / left / right (incluye -start / -end)	'top'
trigger	Forma de activación	LhPopoverTrigger	'hover' | 'click' | 'focus' | 'manual'	'click'
disabled	Desactiva el popover	boolean	—	false
arrow	Si se muestra la flecha	boolean	—	true
width	Ancho de la capa flotante	string | number	—	—
visible	Visibilidad controlada	boolean	—	—
defaultVisible	Visibilidad predeterminada no controlada	boolean	—	false
showAfter	Retraso de aparición (ms, 200 por defecto para evitar toques accidentales)	number	—	200
hideAfter	Retraso de ocultación (ms, 100 por defecto para dar tiempo a mover el puntero hacia la capa)	number	—	100
popperClass	Clase personalizada de la capa flotante	string	—	—
themeVars	Variables de tema a nivel de componente	Record<string, string>	—	—
bgPattern	Patrón de fondo a nivel de componente	string	—	—
sx	Propiedad abreviada de diseño (se aplica al activador)	SxProps	—	—

Eventos de Popover

Evento	Descripción	Firma del callback	Equivalente en Vue
onVisibleChange	Cambio de visibilidad (se dispara tanto en modo controlado como no controlado)	(visible: boolean) => void	update:visible

ref

forwardRef<HTMLDivElement> — elemento raíz del activador. LhPopoverInstance expone show() / hide() / toggle() / isVisible.

Encerrado de foco

Con trigger="click" la capa emergente encierra el foco con semántica de diálogo (Tab hace ciclo dentro), y lo devuelve al cerrarse; los disparadores hover / focus no roban el foco, igual que el comportamiento isModal de plus.

Accesibilidad

La capa flotante es role="dialog"; cuando hay título se vincula con aria-labelledby, y el activador se vincula a la capa con aria-describedby.

Estilos

import '@lh-ui/react/style/popover'