@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
yarn add @chakra-ui/popover
# or
npm i @chakra-ui/popoverImport components
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.
<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
PopoverContentis rendered as a child of<body>
<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>