A floating panel for contextual UI, with flexible sizing, hover triggers, a controllable open state and nesting.

import { Popover, PopoverContent, PopoverTrigger } from "@plexui/vue/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.

API

Popover (root)

Prop	Type	Default	Description
`open / v-model:open`	`boolean`	—	Controlled open state; uncontrolled when omitted
`@update:open`	`(nextState: boolean) => void`	—	Emitted when the popover opens or closes
`show-on-hover`	`boolean`	`false`	Open on hover and focus instead of click
`hover-open-delay`	`number`	`150`	Delay before a hover popover opens (ms)

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

PopoverContent

Prop	Type	Default	Description
`width`	`number \| "auto"`	`"auto"`	Panel width in px
`min-width`	`number \| "auto"`	`300`	Minimum panel width in px
`max-width`	`number`	`700`	Maximum panel width in px, capped by the space available in the viewport
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Preferred placement; flips when it collides
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to trigger
`side-offset`	`number`	`8`	Offset from trigger (px)
`align-offset`	`number`	`-5`	Offset from the start or end alignment (px)
`avoid-collisions`	`boolean`	`true`	Reposition to stay inside the viewport and scroll containers
`translucent`	`boolean`	`false`	Translucent, blurred surface
`auto-focus`	`boolean`	`true`	Move focus into the panel when it opens (hover popovers never take focus)
`class`	`string`	—	Applied to the panel
`default slot`	`{ close, shake }`	—	Panel content; receives the controller functions

usePopoverController(): Composable available in components inside PopoverContent. Returns { close: () => void, shake: () => void }, the same functions the content's default slot receives.

Styling

Popover reads these component tokens. Override them at any scope to restyle it:

--popover-radius: radius (default var(--radius-xl))

TooltipBrief informative text shown on hover or focus, for any trigger element, with conditional enabling and a compact variant.MenuDropdown menu for structured actions with grouped items, submenus, checkbox and radio items, and horizontal layouts.DialogModal dialog for confirmations, forms, and destructive alerts, with a focus trap, escape handling, and an overlay scrim.

Popover