Popover
Floating panel anchored to a trigger, opened on click. For hover-triggered panels use HoverCard; for menus use DropdownMenu.
Default
Click trigger to open.
With form
Common pattern: small inline form inside a popover.
Sides
Set side to top, right, bottom, or left on the content.
API Reference
Props, events, and slots for each sub-component.
Popover
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Open state. Supports v-model:open. |
| modal | boolean | false | Trap focus and dim background. |
Events
| Event | Description |
|---|---|
| update:open | Fires when the popover opens or closes. Enables v-model:open. |
PopoverTrigger
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Merge props onto the child element instead of a button. |
PopoverContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "bottom" | Anchor side. |
| align | "start" | "center" | "end" | "center" | Alignment along the side. |
| sideOffset | number | 4 | Gap from the trigger. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| Space | When focus is on the trigger, toggles the popover open or closed. |
| Enter | When focus is on the trigger, toggles the popover open or closed. |
| Tab | Moves through focusable elements inside the content, then out of the popover. |
| Shift+Tab | Moves focus to the previous focusable element. |
| Esc | Closes the popover and returns focus to the trigger. |
- Focus moves into the content when the popover opens.
- The trigger exposes aria-expanded and aria-controls linking it to the content.