usePopover API

API reference for the usePopover composable.

Explore these related pages for additional context and usage patterns.

Page	Category
usePopover	System
Popover	Disclosure
useClickOutside	System
useEventListener	System

Functions

usePopover

(options?: PopoverOptions) => PopoverReturn

Options

id

string | undefined

Auto-generated if not provided

positionArea

string | undefined

CSS position-area value

Default: 'bottom'

positionTry

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

Properties

isOpen

Ref<boolean, boolean>

Whether the popover is open

id

string

Unique ID for the popover

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 (positioning)

Methods

open

() => void

Open the popover (respects openDelay)

close

() => void

Close the popover (respects closeDelay)

toggle

() => void

Toggle open/close

cancel

() => void

Cancel any pending open or close transition

attach

(el: MaybeRefOrGetter<HTMLElement | null | undefined>) => void

Attach to a content element — wires show/hide watch + toggle event sync