Popover

Popover is used to bring attention to specific user interface elements.

On this page

  • Updated 9 Dec 2024

Playground

No preview available
caret

Props

NameTypeValuesDefault
bodyText-Message about this particular piece of UI.
headingText-Heading
caretVarianttoptop-lefttop-rightbottombottom-leftbottom-rightleftleft-topleft-bottomrightright-topright-bottomtop

body

heading: Heading, body: Message about this particular piece of UI., caret: top
Message about this particular piece of UI.

heading

heading: Heading, body: Message about this particular piece of UI., caret: top
Heading

caret

heading: Heading, body: Message about this particular piece of UI., caret: top
top
heading: Heading, body: Message about this particular piece of UI., caret: top-left
top-left
heading: Heading, body: Message about this particular piece of UI., caret: top-right
top-right
heading: Heading, body: Message about this particular piece of UI., caret: bottom
bottom
heading: Heading, body: Message about this particular piece of UI., caret: bottom-left
bottom-left
heading: Heading, body: Message about this particular piece of UI., caret: bottom-right
bottom-right
heading: Heading, body: Message about this particular piece of UI., caret: left
left
heading: Heading, body: Message about this particular piece of UI., caret: left-top
left-top
heading: Heading, body: Message about this particular piece of UI., caret: left-bottom
left-bottom
heading: Heading, body: Message about this particular piece of UI., caret: right
right
heading: Heading, body: Message about this particular piece of UI., caret: right-top
right-top
heading: Heading, body: Message about this particular piece of UI., caret: right-bottom
right-bottom