---
url: https://brand.okrado.com/patterns/popover/
title: Popover
description: A small floating panel anchored to its trigger, for a moment of extra detail or a quick choice.
kind: reference
owner: hmdmsd
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
  - agent
---

# Popover

> A small floating panel anchored to its trigger, for a moment of extra detail or a quick choice.

A popover holds a few controls or a short explanation next to what triggered it. It is a moment, so it is not deep-linked and it closes on an outside press. If it needs more than a few controls, use a dialog or a drawer.

## Behaviour

Read from the component manifest, so this is the component’s own contract. See [Overlays](https://brand.okrado.com/patterns/overlays/) for layers, stacking and dismissal shared by all layers.

### `Popover`

| Stage         | beta                                                                                                                                                                                                                                                                       |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Keyboard      | - Enter, Space or Down on the trigger opens it
- Tab moves through its controls
- Escape closes it and returns focus to the trigger                                                                                                                                        |
| Dismissal     | * escape: yes
* outside press: yes
* close button: optional
* back gesture: yes                                                                                                                                                                                            |
| Stacking      | Sits above dialogs (z-popover), so it works inside one; it is a moment, never a deep link; a modal never opens from it.                                                                                                                                                    |
| Accessibility | - `role="dialog"` named by its title or `label`, non-modal. Focus moves in on open and returns to the trigger on close; Escape closes it; Tab leaves it and an outside press closes it. For help a touch or screen-reader user needs and that is only text, use Toggletip. |
| Pattern       | [MDN: dialog role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/dialog_role)                                                                                                                                                            |
| Docs          | [Storybook](https://brand.okrado.com/components/?path=/docs/primitives-popover--docs)                                                                                                                                                                                      |

### `PopoverContent`

| Stage         | beta                                                                                  |
| ------------- | ------------------------------------------------------------------------------------- |
| Accessibility | - Named by `title` (a heading) or by `label`.                                         |
| Docs          | [Storybook](https://brand.okrado.com/components/?path=/docs/primitives-popover--docs) |

### `PopoverTrigger`

| Stage         | beta                                                                                  |
| ------------- | ------------------------------------------------------------------------------------- |
| Accessibility | - Gets `aria-haspopup="dialog"` and `aria-expanded`.                                  |
| Docs          | [Storybook](https://brand.okrado.com/components/?path=/docs/primitives-popover--docs) |

### `PopoverClose`

| Stage | beta                                                                                  |
| ----- | ------------------------------------------------------------------------------------- |
| Docs  | [Storybook](https://brand.okrado.com/components/?path=/docs/primitives-popover--docs) |