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 Deprecated		`SystemStyleObject`

Name	Default	Description
as	`div`	`string` Sets the underlying HTML tag for the component
sx Deprecated		`SystemStyleObject`
width	`'small'`	`\| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'auto'` Sets the width of the popover content.
height	`'fit-content'`	`\| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'fit-content' \| 'auto'` Sets the height of the popover content.
overflow	`'auto'`	`\| 'auto' \| 'hidden' \| 'scroll' \| 'visible'` Sets the overflow behavior of the popover content.