Popover is used to display some content on top of another, and should be paired with a clickable trigger element.
It is a base for other more specific component, like Menu
, Autocomplete
and Multiselect
. Please, consider using these specific componenets to cover your needs.
How to use Popover
- Only if
Menu
, Autocomplete
and Multiselect
components are not covering your use cases, you should use Popover
. - Before using this component, double-check your design requirements. We are providing
Menu
, Autocomplete
, and Multiselect
for more specific use-cases and they can address your needs. - Keep in mind that you will have to implement everything related to accessibility for the popover content.
- Component is controllable, so don't forget to pass
onClose
callback prop. Otherwise closeOnEsc
and closeOnBlur
will not work properly.
Import
import { Popover } from '@contentful/f36-components';
import { Popover } from '@contentful/f36-popover';
Examples
Basic
- Pass trigger component as a child for
Popover.Trigger
.
NOTE: 🚨 Ensure that the component that you pass accepts ref
. Consider using forwardRef
for functional components. - Pass popover content as a child for
Popover.Content
Trapping focus within Popover
If the popover contains interactive elements that user can navigate through with Tab
,
consider using react-focus-lock to trap the focus within Popover
Props (API reference)
Content guidelines
- Use an interactive element such as
button
for Popover.Trigger
We strongly recommend using an interactive element such as "button" for
"Popover.Trigger", but if you need to use a non-interactive element, like
"div", you should make that element focusable by providing "tabindex='0'".
Accessibility
- If the popover contains interactive elements that user can navigate through with
Tab
, consider using react-focus-lock to trap the focus within Popover - When the popover is opened, focus is moved to the
Popover.Content
. If you set autoFocus
to false
, it will not move the focus. - When the popover is open and focus is within the
Popover.Content
, click on Esc
key will close the popover. If you set closeOnEsc
to false
, it will not close. - When the popover is open and focus is within the
Popover.Content
, click outside popover or blurring out will close the it. If you set closeOnBlur
to false
, it will not close. - All the necessary a11y attributes for
Popover.Content
and Popover.Trigger
are provided.