79 lines
1.8 KiB
Markdown
79 lines
1.8 KiB
Markdown
# @chakra-ui/popover
|
|
|
|
Popover is a non-modal dialog that floats around a trigger. It is used to
|
|
display contextual information to the user, and should be paired with a
|
|
clickable trigger element.
|
|
|
|
## Installation
|
|
|
|
```sh
|
|
yarn add @chakra-ui/popover
|
|
|
|
# or
|
|
|
|
npm i @chakra-ui/popover
|
|
```
|
|
|
|
## Import components
|
|
|
|
```jsx
|
|
import {
|
|
Popover,
|
|
PopoverTrigger,
|
|
PopoverContent,
|
|
PopoverHeader,
|
|
PopoverBody,
|
|
PopoverFooter,
|
|
PopoverArrow,
|
|
PopoverCloseButton,
|
|
} from "@chakra-ui/react"
|
|
```
|
|
|
|
## Basic Usage
|
|
|
|
When using this component, ensure the children passed to `PopoverTrigger` is
|
|
focusable, user can tab to it using their keyboard, and it can take a `ref`. It
|
|
is critical for accessibility.
|
|
|
|
> **A11y:** When the Popover opens, focus is sent to the `PopoverContent`. When
|
|
> it closes, focus is returned to the trigger.
|
|
|
|
```jsx
|
|
<Popover>
|
|
<PopoverTrigger>
|
|
<Button>Trigger</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent>
|
|
<PopoverArrow />
|
|
<PopoverCloseButton />
|
|
<PopoverHeader>Confirmation!</PopoverHeader>
|
|
<PopoverBody>Are you sure you want to have that milkshake?</PopoverBody>
|
|
</PopoverContent>
|
|
</Popover>
|
|
```
|
|
|
|
## Rendering the Popover in a Portal
|
|
|
|
By default, the Popover doesn't render in a Portal. To make them display in a
|
|
portal, pass the `usePortal` prop.
|
|
|
|
> You might need to **Inspect Element** to see this in action. Notice the
|
|
> `PopoverContent` is rendered as a child of `<body>`
|
|
|
|
```jsx
|
|
<Popover usePortal>
|
|
<PopoverTrigger>
|
|
<Button>Trigger</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent>
|
|
<PopoverArrow />
|
|
<PopoverHeader>Header</PopoverHeader>
|
|
<PopoverCloseButton />
|
|
<PopoverBody>
|
|
<Button colorScheme="blue">Button</Button>
|
|
</PopoverBody>
|
|
<PopoverFooter>This is the footer</PopoverFooter>
|
|
</PopoverContent>
|
|
</Popover>
|
|
```
|