Skip to content

Popover

Alpha

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

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.

Component props

Popover

NameTypeDefaultDescription
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.
sxSystemStyleObject{}Style to be applied to the component

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.

Popover.Content

NameTypeDefaultDescription
asString'div'Sets the HTML tag for the component.
sxSystemStyleObject{}Style to be applied to the component