Popover

Panel flotante anclado a un disparador. No bloquea la página: cierra con ESC o clic fuera.

Preview principal

POPOVERportal · ESC · fuera

¿Necesitas ayuda?

Lado

side: bottom (default) o top. El botón se queda fijo en el centro.

bottomtop

Abrir bottom

Alineación

align: start · center · end.

startcenterend

Abrir center

Ancho

width fija el ancho del panel en px. El panel va por encima del resto (portal).

Panel ancho

Con acciones

Puedes meter botones u otros componentes del sistema.

Opciones

Posición

Prop	Valores	Default
side	bottom | top	bottom
align	start | center | end	center

Uso

import { useState } from "react";
import { Button, Popover } from "devsoftec-ui";

function Ejemplo() {
  const [open, setOpen] = useState(false);

  return (
    <Popover
      trigger={<Button>Ayuda</Button>}
      open={open}
      onOpenChange={setOpen}
      side="bottom"
      align="center"
    >
      <div>Contenido del popover</div>
    </Popover>
  );
}

Props

Prop	Tipo	Default	Descripción
trigger	ReactNode	—	Elemento que abre/cierra
open	boolean	—	Visibilidad
onOpenChange	(open: boolean) => void	—	Cambio de estado
side	bottom | top	bottom	Lado respecto al trigger
align	start | center | end	center	Alineación horizontal
width	number	—	Ancho fijo (px)
children	ReactNode	—	Contenido del panel
className	string	—	Clase en el wrapper

Comportamiento

• Portal a document.body (position: fixed) — no queda bajo menús/TOC
• Si no hay espacio, voltea arriba/abajo automáticamente
• Cierra con ESC o clic fuera
• aria-expanded / aria-haspopup en el trigger
• role="dialog" en el panel