ElyriPopover
Click-triggered popovers with interactive content that position themselves and restore focus on close.
Installation
Add component
pnpm dlx @elyri/cli@latest add popoverExamples
Basic
Click the trigger to open interactive content such as a title and body text.
import { Popover } from './components/elyri/Popover';
export function Example() {
return (
<Popover>
<Popover.Trigger>Open popover</Popover.Trigger>
<Popover.Content>
<div className="demo-ui-popover-title">Popover title</div>
<p className="demo-ui-popover-text">
Popovers hold interactive content, move focus inside and return it to the trigger on close.
</p>
</Popover.Content>
</Popover>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Initial open state when uncontrolled |
onOpenChange | (open: boolean) => void | — | Called whenever the open state changes |
placement | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Preferred side: top / bottom / left / right |
align | 'start' | 'center' | 'end' | 'center' | Cross-axis alignment: start / center / end |
offset | number | 8 | Distance from the trigger |
Popover.Trigger | ButtonHTMLAttributes | — | Trigger button, wires up toggling and ARIA |
Popover.Content | HTMLAttributes | — | The popover surface, role="dialog", interactive |
closeOnInteractOutside | boolean | true | Close on outside click, defaults to true |
closeOnEscape | boolean | true | Close on Escape, defaults to true |