'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Overlays
Popover
A floating panel next to its trigger, for small forms and extra details.
Ant Design: Popover
import { DialogTrigger, Popover, PopoverDialog } from '@alea/ui';
Examples
Popover
A small form next to its trigger.
With an arrow
showArrow points at the trigger.
Props
Popover props
A floating panel attached to a trigger; closes on Escape or outside click.
| Prop | Type | Default | Description |
|---|---|---|---|
showArrow | boolean | - | Shows the little arrow pointing at the trigger. |
PopoverDialog props
The content of a Popover that holds interactive things (forms, menus of actions).
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | - | Optional title at the top. |
Accessibility
- Content with controls goes in a PopoverDialog, which manages focus and has a title.
- Escape or a click outside closes it.
Keyboard
| Key | Does |
|---|---|
| Escape | Closes |
| Tab | Moves through the content |
Do and don't
Do
- Keep popovers short: a few lines and one action.
- Use PopoverDialog with a title when it holds a form.
Don't
- Don't use for long or critical content: use Dialog.
- Don't put long forms in a popover: use a Dialog or Drawer.
- Don't open popovers on hover: use HoverCard or Tooltip for that.