Popover

Arrow · ArrowTip · Anchor · Trigger · Indicator · Positioner · Content · Title · Description · CloseTrigger

#Anchor

A styled part — no props of its own; it takes the anatomy's shared styling.

#ArrowTip

A styled part — no props of its own; it takes the anatomy's shared styling.

#Arrow

A styled part — no props of its own; it takes the anatomy's shared styling.

#CloseTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Description

A styled part — no props of its own; it takes the anatomy's shared styling.

#Indicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`autoFocus`	`boolean`	`true`	Whether to automatically set focus on the first focusable content within the popover when opened.
`closeOnEscape`	`boolean`	`true`	Whether to close the popover when the escape key is pressed.
`closeOnInteractOutside`	`boolean`	`true`	Whether to close the popover when the user clicks outside of the popover.
`defaultOpen`	`boolean`		The initial open state of the popover when rendered. Use when you don't need to control the open state of the popover.
`defaultTriggerValue`	`string \| null`		The initial trigger value when rendered. Use when you don't need to control the trigger value.
`finalFocusEl`	`() => HTMLElement \| null`		Element to receive focus when the popover is closed
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ anchor: string; trigger: string; content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }>`		The ids of the elements in the popover. Useful for composition.
`initialFocusEl`	`() => HTMLElement \| null`		The element to focus on when the popover is opened.
`modal`	`boolean`	`false`	Whether the popover should be modal. When set to `true`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover
`open`	`boolean`		The controlled open state of the popover
`persistentElements`	`(() => Element \| null)[]`		Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
`portalled`	`boolean`	`true`	Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content.
`positioning`	`popover.PositioningOptions`		The user provided options used to position the popover content
`restoreFocus`	`boolean`	`true`	Whether to restore focus to the element that had focus before the popover was opened
`translations`	`popover.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states
`triggerValue`	`string \| null`		The value of the trigger that currently open the popover

Event	Payload
`exitComplete`	`—`
`openChange`	`details: OpenChangeDetails`
`update:open`	`open: boolean`
`triggerValueChange`	`details: TriggerValueChangeDetails`
`update:triggerValue`	`triggerValue: string \| null`
`focusOutside`	`event: FocusOutsideEvent`
`interactOutside`	`event: InteractOutsideEvent`
`pointerDownOutside`	`event: PointerDownOutsideEvent`
`escapeKeyDown`	`event: KeyboardEvent`
`requestDismiss`	`event: CustomEvent<{ originalLayer: HTMLElement; targetLayer: HTMLElement \| undefined; originalIndex: number; targetIndex: number; }>`

#Title

A styled part — no props of its own; it takes the anatomy's shared styling.

#Trigger

Prop	Type	Default	Description
`value`	`string \| undefined`		The value that identifies this specific trigger