# Popover

A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.

Tabs: [Guidelines](/components/web/popover/popover.guidelines.md) · [Code](/components/web/popover/popover.code.md)

## Features

- Traps focus within the popover.

- Flexible and unopinionated.

- Animates and positions out of the box.

## When to use

See [our design pattern around overlays](/patterns/filtering/filtering.about) to learn why and when you should use this component.

## Examples

### With button trigger

```tsx
<Popover>
    <Popover.Trigger>
        <Button type="button" variant="primary">
            Click me
        </Button>
    </Popover.Trigger>
    <Popover.Content>
        <Box p={12}>This is a nice popover</Box>
    </Popover.Content>
</Popover>
```

### With arrow

```tsx
<Popover>
    <Popover.Trigger>
        <Button type="button" variant="primary">
            Click me
        </Button>
    </Popover.Trigger>
    <Popover.Content>
        <Box p={12}>This is a nice popover</Box>
        <Popover.Arrow />
    </Popover.Content>
</Popover>
```

### Position on right side

```tsx
<Popover>
    <Popover.Trigger>
        <Button type="button" variant="primary">
            Click me
        </Button>
    </Popover.Trigger>
    <Popover.Content side="right">
        <Popover.Arrow />
        <Box p={12}>This is a nice popover</Box>
    </Popover.Content>
</Popover>
```

### Align content

```tsx
<Popover>
    <Popover.Trigger>
        <Button type="button" variant="primary">
            Click me
        </Button>
    </Popover.Trigger>
    <Popover.Content align="end">
        <Popover.Arrow />
        <Box p={12}>This is a nice popover</Box>
    </Popover.Content>
</Popover>
```

### Match trigger width

```tsx
<Popover>
    <Popover.Trigger>
        <Button type="button" variant="primary">
            Click me
        </Button>
    </Popover.Trigger>
    <Popover.Content matchWidth>
        <Popover.Arrow />
        <Box p={12}>This is a nice popover</Box>
        <Popover.Close>Close</Popover.Close>
    </Popover.Content>
</Popover>
```

### Controls container

```tsx
<Popover>
    <Popover.Trigger>
        <Button type="button" variant="primary">
            Click me
        </Button>
    </Popover.Trigger>
    <Popover.Content>
        <Popover.Arrow />
        <Box p={12}>This is a nice popover</Box>
        <Popover.ControlsContainer>
            <Popover.ActionButton>Apply</Popover.ActionButton>
            <Popover.Close>Close</Popover.Close>
        </Popover.ControlsContainer>
    </Popover.Content>
</Popover>
```

## Accessibility

Adheres to the [Dialog WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). See [Radix documentation](https://www.radix-ui.com/docs/primitives/components/popover#accessibility) for details.

## Related components

- [Help popover](/components/web/help-popover/help-popover.guidelines): An icon button with a question mark that reveals help information on click or tap.
- [Modal](/components/web/modal/modal.guidelines): A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.
- [Tooltip](/components/web/tooltip/tooltip.guidelines): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.