Popover
A floating panel that appears on click. Modal by default — focus is trapped and scroll is locked.
Basic
Click the trigger to open a popover with form inputs.
With Close Button
Popover with an explicit close button inside the content.
Usage
julia
using Suite
Popover(
PopoverTrigger(
Button(variant="outline", "Open popover")
),
PopoverContent(side="bottom", align="center",
Div(
H4("Dimensions"),
P("Set the dimensions for the layer."),
)
),
)Keyboard Interactions
| Key | Action |
|---|---|
| Escape | Closes the popover and returns focus to the trigger |
API Reference
Popover
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Trigger and content sub-components |
| class | String | "" | Additional CSS classes |
PopoverTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Element that opens the popover on click |
| class | String | "" | Additional CSS classes |
PopoverContent
| Prop | Type | Default | Description |
|---|---|---|---|
| side | String | "bottom" | Preferred side of the trigger ("top", "right", "bottom", "left") |
| align | String | "center" | Alignment along the side ("start", "center", "end") |
| side_offset | Int | 4 | Distance in pixels from the trigger |
| children... | Any | - | Popover panel content |
| class | String | "" | Additional CSS classes |
PopoverClose
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Element that closes the popover on click |
| class | String | "" | Additional CSS classes |
PopoverAnchor
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Custom anchor element for positioning the popover |
| class | String | "" | Additional CSS classes |