usePopover API

Native popover API with a pluggable positioning adapter. Defaults to CSS-anchor positioning; swap in FloatingUIPopoverAdapter (or any PopoverAdapter) per instance or app-wide via createPopoverPlugin.

Explore these related pages for additional context and usage patterns.

Page	Category
usePopover	System
Popover	Disclosure
useClickOutside	System
useEventListener	System

Functions

createPopoverFallback

() => PopoverPluginContext

Synthesized fallback used when usePopover() is called without app.use(createPopoverPlugin()). Returns { adapter: undefined } so resolution falls through to V0PopoverAdapter.

usePopover

(options?: PopoverOptions) => PopoverReturn

createPopoverContext

<_E>(_options?: PopoverPluginOptions | undefined) => ContextTrinity<_E>

createPopoverPlugin

(_options?: PopoverPluginOptions | undefined) => Plugin

Options

id

string | undefined

Auto-generated if not provided

positionArea

MaybeRefOrGetter<string | undefined>

CSS position-area value

Default: 'bottom'

positionTry

MaybeRefOrGetter<string | undefined>

CSS position-try-fallbacks value

Default: 'most-width bottom'

isOpen

Ref<boolean, boolean> | undefined

External ref for bidirectional open state (e.g., from defineModel)

openDelay

MaybeRefOrGetter<number> | undefined

Delay in ms before opening the popover.

Default: 0

closeDelay

MaybeRefOrGetter<number> | undefined

Delay in ms before closing the popover.

Default: 0

adapter

PopoverAdapter | undefined

Positioning engine. Resolution: per-instance adapter, then the createPopoverPlugin adapter, then new V0PopoverAdapter() (CSS anchor positioning, zero runtime dependency).

Properties

isOpen

Ref<boolean, boolean>

Whether the popover is open

anchorStyles

Readonly<Ref<Record<string, string>, Record<string, string>>>

Styles to spread on the activator element (anchor-name)

contentAttrs

Readonly<Ref<{ id: string; popover: ""; }, { id: string; popover: ""; }>>

Attrs to spread on the content element (id, popover)

contentStyles

Readonly<Ref<Record<string, string>, Record<string, string>>>

Styles to spread on the content element. Owned by the active adapter — CSS anchor declarations from V0PopoverAdapter, or whatever a custom engine (e.g. Floating UI) returns. Not inherently CSS-anchor styles.