Popover

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

On this page

  • Updated 29 Apr 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

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

heading

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

caret

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