Popover

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

Page navigation navigation

React

ready

Rails

ready

Figma

<Popover relative open>
  <Popover.Content>Popover content</Popover.Content>
</Popover>

<Popover relative open>
  <Popover.Content>Popover content</Popover.Content>
</Popover>

Name	Default	Description
as	`div`	`string` Sets the underlying HTML tag for the component
caret	`'top'`	`\| '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	`false`	`boolean` Controls the visibility of the popover.
relative	`false`	`boolean` Set to true to render the popover using relative positioning.
sx		`SystemStyleObject`

Name	Default	Description
as	`div`	`string` Sets the underlying HTML tag for the component
sx		`SystemStyleObject`