Popover
A small panel anchored to a trigger, for content that needs more room than a tooltip and less ceremony than a modal.
Popover, tooltip, or modal?
A Tooltip names a control and vanishes; you can't click into it. A popover holds interactive content but leaves the page behind it usable. A modal blocks the page, which you want only when the task genuinely can't be abandoned halfway.
With actions
Custom body
children render below the description, so you can put a field, a list, or anything else inside.
Placement
Use the -start and -end variants to keep a panel from running off the edge when its trigger sits near one.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | ReactNode | The element that toggles the panel. Rendered as-is, so pass a real button. | |
| title | string | Panel heading. | |
| description | string | Supporting line under the title. | |
| children | ReactNode | Arbitrary panel body, rendered under the description. | |
| actions | ReactNode | Footer actions, typically one to three buttons. | |
| placement | 'bottom' | 'top' | 'bottom-start' | 'bottom-end' | 'bottom' | Where the panel opens relative to the trigger. |