Popover

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

Page navigation navigation

React
readyNot reviewed for a11y
Rails
readyNot reviewed for a11y

React examples

Default

Popover content

Props

Popover

NameRequiredDescription
as
string
Sets the underlying HTML tag for the component
caret
| 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top'
Controls the position of the caret
open
boolean
Controls the visibility of the popover.
relative
boolean
Set to true to render the popover using relative positioning.
sx
SystemStyleObject

Popover.Content

NameRequiredDescription
as
string
Sets the underlying HTML tag for the component
sx
SystemStyleObject