Tooltip
A short text hint on hover or focus — 1.4.13 compliant.
Fiscal year 2026: July 1, 2025 – June 30, 2026
Show the markup
<span class="cc-tooltip-wrap" data-cc-tooltip>
<button class="cc-button cc-button--secondary cc-button--sm" type="button" aria-describedby="ex-tip">FY26</button>
<span class="cc-tooltip" id="ex-tip" role="tooltip" hidden>Fiscal year 2026: July 1, 2025 – June 30, 2026</span>
</span>Accessibility
- WCAG 1.4.13, all three requirements: dismissable (Esc hides it), hoverable (an invisible bridge lets the pointer reach it), persistent (stays until hover/focus ends).
- Attached via
aria-describedby; appears on focus as well as hover. - Text only, and never the sole place information lives. Interactive content goes in a Popover.