Popover

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

View code

Features

Full keyboard navigation
Customize positioning of popover
Can be controlled or uncontrolled
Focus is fully managed
Supports an optional arrow component

Anatomy

Trigger: The button(s) which open/close the popover.
Content: The content area viewed when the trigger is clicked.
Arrow: An optional arrow component
Close: A button which closes the popover

Usage

To create a popover, use the createPopover builder function. Follow the anatomy or the example above to create your popover.

API Reference

createPopover

Props

Prop	Default	Type / Description
`positioning`	`position: 'bottom'`	`FloatingConfig` A configuration object which determines how the floating element is positioned relative to the trigger.
`arrowSize`	`8`	`number` The size of the arrow which points to the trigger in pixels.
`open`	`false`	`boolean` Whether the popover is open by default or not.

Returned Props

Returned Prop	Type	Description
`open`	`Writable<boolean>`	A writable store that controls the open state of the popover.
`trigger`	-	The builder store used to create the popover trigger.
`content`	-	The builder store used to create the popover content.
`close`	-	The builder store used to create the popover close button.
`arrow`	-	The builder store used to create the popover arrow.

trigger

Data Attributes

Data Attribute	Value
`[data-state]`	`'open' \| 'closed'`
`[data-melt-popover-trigger]`	Present on all trigger elements.

content

Data Attributes

Data Attribute	Value
`[data-melt-popover-content]`	Present on all content elements.

close

Data Attributes

Data Attribute	Value
`[data-melt-popover-close]`	Present on all close elements.

arrow

Data Attributes

Data Attribute	Value
`[data-arrow]`	`'true'`
`[data-melt-popover-arrow]`	Present on all arrow elements.

Accessibility

Adheres to the Dialog WAI-ARIA design pattern

Key	Behavior
`Space`	Toggles the popover.
`Enter`	Toggles the popover.
`Tab`	Moves focus to the next focusable element; all focusable elements in the popover are included in the page Tab sequence.
`Shift + Tab`	Moves focus to the previous focusable element; all focusable elements in the popover are included in the page Tab sequence.
`Esc`	Closes the popover and moves focus to the trigger element.

On This Page