---
title: 'Popover'
type: 'component'
status: 'stable'
slug: /components/popover/
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/popover'
storybook: 'https://f36-storybook.contentful.com/?path=/story/components-popover--basic'
typescript: ./src/Popover.tsx
---

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

```jsx static=true
import { Popover } from '@contentful/f36-components';
// or
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`

```jsx file=examples/PopoverBasicExample.tsx

```

### Trapping focus within Popover

If the popover contains interactive elements that user can navigate through with `Tab`,
consider using [react-focus-lock](https://github.com/theKashey/react-focus-lock) to trap the focus within Popover

```jsx file=examples/PopoverFocusLockExample.tsx

```

## Props (API reference)

<PropsTable of="Popover" />

## Content guidelines

- Use an interactive element such as `button` for `Popover.Trigger`

<Note variant="neutral">
  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'".
</Note>

## Accessibility

- If the popover contains interactive elements that user can navigate through with `Tab`, consider using [react-focus-lock](https://github.com/theKashey/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.