# Popover

A card hung from the key that opened it, with a printed leader running back to the key. Not modal: the page stays live around it.

Kit part · With the Kit · https://tactileui.dev/parts/popover

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Opening and closing are the browser’s. The arithmetic is a pure function with its own tests.

## Variants

- Hung below its key
- Above, when the page runs out
- With a key · live

## States

- Key
- Card out, below
- Above
- Focus in the card

## Props and options

| Name | Kind | Description |
| - | - | - |
| popover | attribute | Top layer, light dismiss, Escape. Leave it off for a card that sits in the page. |
| popovertarget | attribute | Native: the key opens and closes the card; the browser links them for assistive tech. |
| data-side | attribute | Where the card prefers to hang. It flips to the opposite side when there is no room. |
| data-align | attribute | Where along that side. |
| aria-labelledby | attribute | For a card with keys or fields in it. |
| data-placed | attribute | The side it was placed on; the leader and the slide follow it. |
| placePopover(card, anchor, options) | function | Place any fixed card beside an element or a point; the menu and the notification centre use it. |
| Enter · Space · Escape · Tab | keyboard | Open and close from the key; Escape closes and returns focus; Tab walks into the card after the key. |

## Usage notes

Open either card with a click, Enter or Space. Tab goes into it; Escape or a click outside puts it away and focus returns to the key.

## Accessibility

- Not modal: focus is not trapped, and the rest of the page keeps working. For a decision that must be made now, use a dialog.
- Escape closes it and focus returns to the key; a click outside closes it too.

## Related parts

- [Menu](https://tactileui.dev/parts/menu): A card of actions and options that slides out from under its key. The key stays down while the card is out; an option that is on lights its lamp.
- [Tooltip](https://tactileui.dev/parts/tooltip): A few words on a small label plate, the kind riveted beside a control on a rack: printed in the contrast colours with a rule just inside its edge and a short tab aimed at its key. It comes up when a pointer rests on the key or the keyboard reaches it, is read by a screen reader, and goes on Escape.
- [Dialog](https://tactileui.dev/parts/dialog): A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.