Popover
Popover is used to bring attention to specific user interface elements.
Page navigation navigation
React
ready
Rails
ready
Figma
React examples
Default
Popover content
Props
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 |
Popover.Content
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. |