Popover

Popover provides a generic anchored top-layer surface for authored content that is not a menu, tooltip, or modal dialog.

Popover is optional. Use it when you need a small anchored panel with simple open/close behavior, light dismiss, and basic positioning. For richer interaction patterns, prefer a purpose-built component such as Menu, Tooltip, Dialog, DatePicker, or TimePicker, or compose directly with the native Popover API and the library's styling tokens.

Popover contentUse it for lightweight anchored panels.

Close lifecycle

update:open(false) is emitted when the native popover closes. The later closed event waits for Popover-owned exit motion to finish, but does not wait for animations inside slot content. Keep slot payload available while closing and release it from closed.

Show API

Calling Popover.show({ source }) while open updates the source without closing and reopening the Popover or triggering its open or close lifecycle. Repeating the same source, or omitting it, keeps the current source. anchorName and anchorElement take precedence for CSS positioning; changes to anchorElement can update the position while open.

Examples

Default

Chillet

Signed in to the current workspace.

Controlled

StatusOpenClosedArchived

Floating surface

See floating surface tokens for shared theme colors, borders, shadows, and an interactive example with nested menus and dialogs.

Reference

Anatomy

Highlight

Element	Part	Selector
<div>	root	[data-scope="popover"][data-part="root"] left_clickLMBCopy
<div>	surface	[data-scope="popover"][data-part="surface"] left_clickLMBCopy

Props

Name	Description	Default	Control
shapeOptional	Corner style; inherits the shared shape default. M3Shape | undefined	-	-
idOptional	Optional explicit id for the popover element. string | undefined	undefined
popoverOptional	Native popover behavior. automanualhint	"auto"	checkautomanualhint
placementOptional	Preferred placement relative to the anchor. bottom-startbottombottom-endtop-starttoptop-endstartstart-topstart-bottomendend-topend-bottom	"bottom-start"	checkbottom-startbottombottom-endtop-starttoptop-endstartstart-topstart-bottomendend-topend-bottom
anchorNameOptional	CSS anchor name used to position the popover. string | undefined	undefined
anchorElementOptional	Element used as the position anchor and showPopover source. HTMLElement | undefined	undefined	-
matchAnchorWidthOptional	Whether the popover surface should match the anchor width. boolean | undefined	false
roleOptional	Accessible role for authored interactive content. string | undefined	undefined
ariaLabelOptional	Accessible label for the popover surface. string | undefined	undefined
ariaLabelledByOptional	Element id that labels the popover surface. string | undefined	undefined
openOptional	- boolean | undefined	false

Events2

Name	Type	Description
update:open	[value: boolean]	-
closed	[]	-

Slots1

Name	Parameters	Description
default	-	Popover content.

Styling8

Preview

Token	Description
--md-popover-container-colorColor Fallbackvar(--md-sys-color-surface-container)	Controls popover container color.
--md-popover-container-elevationElevation Fallbackvar(--md-sys-elevation-level2)	Controls popover container elevation.
--md-popover-container-shapeShape Fallbackvar(--md-shape-popover)	Controls popover container shape.
--md-popover-max-heightLayout Fallback32rem	Controls popover maximum height.
--md-popover-max-widthLayout Fallback28rem	Controls popover maximum width.
--md-popover-min-widthLayout Fallback0rem	Controls popover minimum width.
--md-popover-on-container-colorColor Fallbackvar(--md-sys-color-on-surface)	Controls popover content color.
--md-popover-paddingLayout Fallback1rem	Controls popover content padding.