Skip to content


Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.

Two components make up a popover; the Popover component controls the absolute positioning of the popover, and Popover.Content renders the inner content of the popover as well as the caret.

By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.

It can be useful to give the Popover.Content element a margin to help align the popover.

Default Example

Popover heading

Message about this particular piece of UI.

Caret position

Popover supports various caret positions, which you can specify via the caret property. This demo shows all the valid values for the prop. The default is top. Note that the top-left, bottom-left, top-right, and bottom-right values modify the horizontal alignment of the popover.

Caret Position

Popover Visibility

top caret

Message about this particular piece of UI.

System props

System props are deprecated in all components except Box. Please use the sx prop instead.

ProgressBar components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props


asString'div'Sets the HTML tag for the component.
caretString'top'Controls the position of the caret. See below for the list of caret positions.
openBooleanfalseControls the visibility of the popover.
relativeBooleanfalseSet to true to render the popover using relative positioning.

Caret Positions

The caret prop can be one of the following values: top, bottom, left, right, bottom-left, bottom-right, top-left, top-right, left-bottom, left-top, right-bottom, or right-top.


asString'div'Sets the HTML tag for the component.
Edit this page on GitHub
2 contributorsVanAndersonBinaryMuse
Last edited by VanAnderson on July 22, 2021