# @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
Confirmation!Are you sure you want to have that milkshake?
```
## 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 ``
```jsx
HeaderThis is the footer
```