Components · Popover
Popover
A layer anchored to an element that flips and shifts at the edge
No basis in this component: Variant — and a control that changes nothing is not shown.
Enter your email to reveal the code — once for the whole site.
Enter your email to reveal the code — once for the whole site.
Enter your email to reveal the code — once for the whole site.
Enter your email to reveal the prompt — once for the whole site.
Enter your email to reveal the code and the prompt
Once. No password, no account.Usage
- Copy
tokens.cssinto your project and link it before the component styles. - Paste the HTML markup where you want it.
- Paste the CSS into your sheet — its selectors are scoped to the component class, so nothing leaks.
- Paste the JS after the markup, or load it with
defer. - Set
dirtortlorltr— the component works with both.
States
HoverFocusSelectedEmpty
RTL/LTR
Works in both directions — Arabic and English. Enforced in every build by , and exercised in the playground above.
Responsive
No fixed width that overflows, and a layout that stretches.
Accessibility
- Every field is named, with no redundant ARIA —
- Fully operable by keyboard
- Carries an explicit semantic role
Motion
Short transitions on hover and focus. And it stops for anyone who prefers reduced motion.
Dependencies
No external dependency — no CDN, no package to download.
tokens.css— Every colour and size in the component points to a token, with no literal valuescript.js— The component behaviour lives there — without it, it renders but does not work
Examples
- In English — The direction flips and the layout follows
- In light mode — Colours come from tokens, so they follow the theme
- On the mobile stage — A width of 360 pixels
- Without motion — As anyone who prefers reduced motion sees it
Verification matrix
| Capability | Status | Evidence |
|---|---|---|
| RTL | Verified | check-rtl |
| LTR | Verified | check-rtl |
| Dark | Verified | check-themes |
| Light | Verified | check-themes |
| Contrast | Verified | check-contrast |
| Accessibility | Verified | a11y.test · check-aria |
| Keyboard | Verified | check-keyboard |
| Tokens | Verified | check-raw-colors |
| Localization | Supported | Measured from the files |
| Motion | Supported | Measured from the files |
| Reduced motion | Supported | Measured from the files |
| Touch | Supported | Measured from the files |
| Keyboard handling | Supported | Measured from the files |
| Drag | Supported | Measured from the files |
Verified means a gate attests to it in every build. Supported means it was measured from the files, with no gate attesting — so it claims no more.
Not documented yet: When to use · When not to use — it needs human judgement, and no prose will be generated that looks like judgement without being it.