What a tooltip should do
A tooltip is a small bubble of supplementary text tied to a control. To be accessible it must reach keyboard and screen reader users, not just people with a mouse. The two core requirements are appearing on focus and being associated with its trigger.
- Show on hover and focus so keyboard users see it too.
- Associate it with the trigger so screen readers announce it.
- Keep it supplementary rather than essential information only there.
Reachability and dismissal
A tooltip that only appears on hover excludes keyboard users entirely, so focus must trigger it as well.
- Reveal the tooltip when its trigger receives focus.
- Let the Escape key dismiss the tooltip without losing focus.
- Keep the tooltip visible while the pointer moves toward it.
Connecting it for assistive tech
Linking the tooltip text to the control means a screen reader reads the description along with the controls name.
- Use a description association so the bubble is read after the label.
- Avoid the title attribute alone, which is unreliable and not keyboard friendly.
- Do not put interactive controls inside a plain tooltip.
A tooltip should describe a control, never be the only place crucial information lives, since some users may never see it.
Key idea
An accessible tooltip appears on focus as well as hover, dismisses with Escape, and is associated with its trigger so screen readers announce its text.