'/%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
HoverCard
A rich preview on hover or keyboard focus: profiles, link previews, definitions.
Ant Design: Popover trigger="hover"
import { HoverCard } from '@alea/ui';
Examples
Profile preview
Hover or focus the name; move into the card to keep it open.
Built by Ale Vasquez in Caracas.
Props
HoverCard props
A rich preview on hover or keyboard focus, which people can move into (Radix HoverCard, Ant Popover trigger hover).
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The card: a preview of a profile, a page, a definition. Keep it supplementary: the same information must be reachable another way. |
triggerrequired | ReactNode | - | The link or element people hover or focus. |
closeDelay | number | 200 | ms before it closes after the pointer leaves. Default 200. |
openDelay | number | 500 | ms before it opens. Default 500. |
placement | "start" | "end" | "bottom" | "top" | 'bottom' | top, bottom (default), start or end. |
Accessibility
- Opens on focus as well as hover, and the content is linked as the trigger's description.
- People can move the pointer into the card; Escape closes it.
- Keep it supplementary: touch users can't hover.
Keyboard
| Key | Does |
|---|---|
| Tab | Focusing the trigger opens it |
| Escape | Closes it |
Do and don't
Do
- Keep it supplementary: the same information must be reachable by clicking.
- Delay it (500 ms) so it doesn't pop while the pointer passes.
Don't
- Don't put actions people need only in a hover card.
- Don't use it on touch-first screens.