Skip to content

Popover

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

Popover components get COMMON, LAYOUT, and POSITION system props. Popover.Content components get COMMON, LAYOUT, BORDER, and FLEX system props. Read our System Props doc page for a full list of available props.

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.

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.
Edit this page on GitHub
1 contributorBinaryMuse
Last edited by BinaryMuse on April 14, 2020