Popover
ARIA
RTL
Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.
Based on Headless UI.
Anatomy
<Popover> <Popover.Trigger>...</Popover.Trigger> <Popover.Panel>...</Popover.Panel> </Popover>
Default
Position
The complete list of all possible positions is in the props table below.
Trigger elements
Open popover
With close button
Tooltip view example
Tooltip view example with always open state
This is the popover with arrow (tooltip)
Disable flip on component
Popover
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| position | top-start | top-end | bottom-start | bottom-end | right-start | right-end | left-start| left-end | top | bottom | right| left | No | bottom | Set placement for popover |
| autoPositionDisable | boolean | No | false | Disable flip on component |
| Render Props: | ||||
| open | boolean | No | - | Whether or not the popover is open. |
Popover.Panel
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for custom styles. |
| isStatic | boolean | No | - | Whether the component should be always open and ignore the internally managed open/closed state. |
| Render Props: | ||||
| open | boolean | No | - | Whether or not the popover is open. |
| close | () => void | No | - | Closes the popover. |