Popover
A small overlay next to a trigger. Put exactly two children in it: one PopoverTrigger, then one PopoverContent. A click on the trigger opens and closes the content. Escape or a click outside closes it.
Examples
Loading examples…
Props
| Prop | Type | Description |
|---|---|---|
open | boolean | Default false |
showOnHover | boolean | |
hoverOpenDelay | number | Milliseconds before a hover opens it. Default 0 |
Slots
children· multiple
PopoverTrigger
The trigger of a Popover. Its children are the label of the trigger: a Text or an Icon. Do not put a Button in it, because the trigger is already a button.
Loading examples…
| Prop | Type | Description |
|---|---|---|
block | boolean | Full width |
Slots
children· multiple
PopoverContent
The body of a Popover. It shows only when the Popover is open.
Loading examples…
| Prop | Type | Description |
|---|---|---|
side | "top" | "bottom" | "left" | "right" | Default "bottom" |
sideOffset | number | Pixels between the trigger and the content. Default 6 |
align | "start" | "center" | "end" | Default "center" |
width | number | string | 4px steps when a number |
Slots
children· multiple