Components
Popover

Popover

A popover is a non-modal dialog that floats around a trigger. It is used to display contextual information to the user, and should be paired with a clickable trigger element.

API Reference

Root

PropTypeDefault
autoFocus
boolean
closeOnEsc
boolean
closeOnInteractOutside
boolean
defaultOpen
boolean
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ anchor: string trigger: string content: string title: string description: string closeTrigger: string positioner: string arrow: string }>
initialFocusEl
HTMLElement | (() => MaybeElement)
modal
boolean
false
onEscapeKeyDown
(event: KeyboardEvent) => void
onFocusOutside
(event: FocusOutsideEvent) => void
onInteractOutside
(event: InteractOutsideEvent) => void
onOpenChange
(details: OpenChangeDetails) => void
onPointerDownOutside
(event: PointerDownOutsideEvent) => void
open
boolean
portalled
boolean
true
positioning
PositioningOptions

Arrow

PropTypeDefault
asChild
boolean

Title

PropTypeDefault
asChild
boolean

Anchor

PropTypeDefault
asChild
boolean

Content

PropTypeDefault
asChild
boolean
lazyMount
boolean
false
onExitComplete
() => void
present
boolean
unmountOnExit
boolean
false

Trigger

PropTypeDefault
asChild
boolean

ArrowTip

PropTypeDefault
asChild
boolean

Indicator

PropTypeDefault
asChild
boolean

Positioner

PropTypeDefault
asChild
boolean

Description

PropTypeDefault
asChild
boolean

CloseTrigger

PropTypeDefault
asChild
boolean