Popover | Destyler

Displays rich content in a portal, triggered by a button.

Features

Can be controlled or uncontrolled.
Customize side, alignment, offsets, collision handling.
Optionally render a pointing arrow.
Focus is fully managed and customizable.
Supports modal and non-modal modes.
Dismissing and layering behavior is highly customizable.

Install

Import

API

Root

Props	Type	Default
defaultOpen	`boolean`	false
modal	`boolean`	false
open	`boolean`	undefined

Event	Type
update:open	`[_value: boolean]`

Data attribute	Value
[data-state]	'open' \| 'closed'

Trigger

Props	Type	Default
as	`AsTag \| Component`	button
asChild	`boolean`	false

Portal

Props	Type	Default
disabled	`boolean`	false
forceMount	`boolean`	false
to	`string \| HTMLElement`	body

Content

Props	Type	Default
align	`'start' \| 'center' \| 'end'`	center
alignOffset	`number`	0
arrowPadding	`number`	0
as	`AsTag \| Component`	div
asChild	`boolean`	false
avoidCollisions	`boolean`	true
collisionBoundary	`Element \| (Element \| null)[] \| null`	() => []
collisionPadding	`number \| Partial<Record<'top' \| 'right' \| 'bottom' \| 'left', number>>`	0
disableOutsidePointerEvents	`boolean`	false
forceMount	`boolean`	false
hideWhenDetached	`boolean`	false
isDismissable	`boolean`	true
prioritizePosition	`boolean`	false
side	`'top' \| 'right' \| 'bottom' \| 'left'`	bottom
sideOffset	`number`	0
sticky	`'partial' \| 'always'`	partial
trapFocus	`boolean`	false
updatePositionStrategy	`'always' \| 'optimized'`	optimized

Event	Type
closeAutoFocus	`[_event: Event]`
escapeKeyDown	`[_event: KeyboardEvent]`
focusOutside	`[_event: FocusOutsideEvent]`
interactOutside	`[_event: PointerDownOutsideEvent \| FocusOutsideEvent]`
openAutoFocus	`[_event: Event]`
pointerDownOutside	`[_event: PointerDownOutsideEvent]`

Data attribute	Value
[data-state]	'open' \| 'closed'
[data-side]	'left' \| 'right' \| 'bottom' \| 'top'
[data-align]	'start' \| 'end' \| 'center'

CSS Variable	Description
--destyler-popover-content-transform-origin	The `transform-origin` computed from the content and arrow positions/offsets
--destyler-popover-content-available-width	The remaining width between the trigger and the boundary edge
--destyler-popover-content-available-height	The remaining height between the trigger and the boundary edge
--destyler-popover-trigger-width	The width of the trigger
--destyler-popover-trigger-height	The height of the trigger

Arrow

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
height	`number`	5
width	`number`	10

Close

Props	Type	Default
as	`AsTag \| Component`	button
asChild	`boolean`	false