@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


Trigger




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


Trigger



Header


Button

This is the footer


``