1. Primitives
  2. Popover

<Popover />

The Popover component is used to display some content on top of another.
<Box padding={4} style={{textAlign: 'center'}}>
<Popover
content={<Text size={[2, 2, 3, 4]}>Hello, world</Text>}
padding={4}
placement="top"
portal
open
>
<Button
mode="ghost"
padding={[3, 3, 4]}
text="Reference"
/>
</Popover>
</Box>

Properties  

animate?: boolean
Whether the Popover should animate in and out.
arrow?: boolean
boundaryElement?: HTMLElement | null
children?: React.ReactElement
constrainSize?: boolean
content?: React.ReactNode
disabled?: boolean
open?: boolean
padding?: number | number[]
placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' | 'bottom' | 'bottom-start' | 'bottom-end'
portal?: boolean
Whether or not to render the popover in a portal element.
preventOverflow?: boolean
radius?: number | number[]
referenceElement?: HTMLElement | null
scheme?: 'dark' | 'light'
Made withby folks at