BEFOREHover-only help bubble (not keyboard reachable)
Problems: only appears on mouse hover, disappears when you move the pointer, and isn’t connected to the trigger for assistive tech.
?
Why we ask for email
We send a receipt and account alerts. You can change this later.
Try: use Tab to reach the “?” and press Enter — nothing opens. The help only appears on hover.
AFTERButton + named popover + Escape + focus restore
Pattern: a real <button> controls a small non-modal popover with aria-expanded + aria-controls. On open, focus moves into the popover; on close, focus returns to the trigger.
Why we ask for email
We send a receipt and account alerts. You can change this later.
Tip: press Esc to close.
Try: open, press Esc, and notice focus returns to the “?” button.
Notes
- A popover isn’t automatically a menu. Don’t use
role="menu"unless the popup truly is an application menu. - If the popover contains a short explanation, consider whether it should be static helper text instead (no popover needed).
- Make closure predictable:
Esc, close button, and click outside are common; always restore focus.