Popover
Aria
RTL
Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.
Anatomy
<Popover> <Popover.Trigger>...</Popover.Trigger> <Popover.Panel>...</Popover.Panel> </Popover>
Default
Position
Trigger elements
Open popover
With close
Popover props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | Yes | - | Unique element's identifier |
| is_open | boolean | No | false | Whether or not the popover is open |
| default | slot | Yes | - | Content of Popover item, see Popover.Panel |
| trigger | slot | Yes | - | Trigger element of Popover item, see Popover.Trigger |
| class | css_class | No | - | Tailwind classes for custom styles |
Popover.Panel props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| position | top | bottom | left | right | top-start | bottom-start | left-start | right-start | top-end | bottom-end | left-end | right-end | No | top | Set placement for popover |
| class | css_class | No | - | Tailwind classes for custom styles |