Popover

import { Popover } from "@plexui/ui/components/Popover";

Examples

Overview

Open on hover

Using the controller

Nesting

All floating UI components in Plex UI can be infinitely nested by relying on z-index: auto; and natural stacking order.

Additionally, esc keypresses are handled independently as a stacking order.

Reference

Popover (root)

Prop	Type	Default	Description
`showOnHover`	`boolean`	—	Open on hover and focus instead of click

Popover.Trigger — Renders the element that toggles the popover. The trigger should be the user's point of interaction for revealing the popup. No specific props.

Popover.Content

Prop	Type	Default	Description
`width`	`number \| string`	—	Panel width (px or CSS value)
`minWidth`	`number \| string`	`300`	Minimum panel width in px
`maxWidth`	`number \| string`	—	Maximum panel width
`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred placement
`align`	`"start" \| "center" \| "end"`	—	Alignment relative to trigger
`sideOffset`	`number`	—	Offset from trigger (px)
`alignOffset`	`number`	—	Alignment offset (px)

usePopoverController() — Hook available inside Popover.Content. Returns { close: () => void, shake: () => void }.