Open experiment
Morphing tooltip
A CSS-first tooltip that begins as a small status dot and expands into an explanatory bubble. The native trigger stays linked to the description, and focus users receive the same content and spatial treatment as pointer users.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<span class="cmp-morph-tooltip">
<button type="button" aria-describedby="cmp-morph-tooltip-content">
<span aria-hidden="true">?</span><b>Why this score?</b>
</button>
<span id="cmp-morph-tooltip-content" role="tooltip"
><strong>Excellent contrast</strong><small>8.4:1 · passes WCAG AAA for body text</small></span
>
</span>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The trigger is a native button linked with aria-describedby.
- Tooltip content appears on hover and focus-within.
- Reduced motion changes size instantly.
License: MIT License for open-source use, modification, and distribution.