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.

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
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
teleportOptional	Teleport target. Set to false to render in place. string | boolean | undefined	"body"	-
openOptional	- boolean | undefined	false

Events1

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

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.

Examples

Default

Controlled