Testing a CSS-only tooltip
What’s this about?
Can a simple tooltip be delivered without using JavaScript? This page shows two simple examples:
- Example 1: Extending the accessible name using aria-label
- Example 2: Providing additional help text using aria-describedby
Example 1: using aria-label
Example 2: using aria-describedby
Find your account number on your recent utility bill
Some simple tests:
- Is the tooltip in close proximity?
- Is the tooltip persistent?
- Can the tooltip be accessed via keyboard only?
- Can the tooltip be closed via the ESC key? (if relevant)
- Will the tooltip close if the user clicks elsewhere?
- Will the tooltip close if focus moves?
- Is the tooltip announced when activated?
Important caveats:
- These examples are not intended for real production use. This is about exploring limits and trade-offs, not recommending a pattern.
- The content shown is deliberately simple. Anything complex should not be a tooltip.