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)

showDelay

number | undefined

Delay in ms before showing the popover.

Default: 0

hideDelay

number | undefined

Delay in ms before hiding 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

close

() => void

Close the popover

toggle

() => void

Toggle open/close

attach

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

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