Skip to main content

Accessibility UI Guidelines: Tooltips

Tooltips

3.6 Tooltips

Tooltips are small, interactive overlays that provide additional information about an element when a user hovers over it, focuses on it, or performs a related action. Ensuring that tooltips are accessible is critical for improving the usability of your application, especially for users who rely on assistive technologies.

3.6.1 Semantic Markup

Use semantic HTML and ARIA attributes to associate tooltips with their corresponding elements. Avoid relying solely on visual cues for tooltips.

<!-- Tooltip with ARIA Attributes -->
<button id="tooltipButton" aria-describedby="tooltip1">More Info</button>
<div id="tooltip1" role="tooltip" hidden>
    This button provides additional information.
</div>

3.6.2 Keyboard Accessibility

Tooltips should be accessible to keyboard users. Ensure that they appear when the related element is focused and can be dismissed or hidden using the keyboard.

// Show tooltip on focus and hide on blur
const tooltipButton = document.getElementById('tooltipButton');
const tooltip = document.getElementById('tooltip1');

tooltipButton.addEventListener('focus', () => {
    tooltip.hidden = false;
});

tooltipButton.addEventListener('blur', () => {
    tooltip.hidden = true;
});

3.6.3 Visible on Hover and Focus

Ensure that tooltips appear on both hover (for mouse users) and focus (for keyboard users) and remain visible for an appropriate duration.

<!-- Tooltip with Hover and Focus Behavior -->
<button id="tooltipButton2" aria-describedby="tooltip2">Help</button>
<div id="tooltip2" role="tooltip" hidden>
    This is a helpful tooltip.
</div>


// Show and hide tooltip on hover and focus
const tooltipButton2 = document.getElementById('tooltipButton2');
const tooltip2 = document.getElementById('tooltip2');

tooltipButton2.addEventListener('mouseover', () => {
    tooltip2.hidden = false;
});

tooltipButton2.addEventListener('mouseout', () => {
    tooltip2.hidden = true;
});

tooltipButton2.addEventListener('focus', () => {
    tooltip2.hidden = false;
});

tooltipButton2.addEventListener('blur', () => {
    tooltip2.hidden = true;
});

3.6.4 ARIA Attributes

Use ARIA attributes like aria-describedby to associate the tooltip with its trigger element. The tooltip should have a role="tooltip" attribute to indicate its purpose.

<!-- Tooltip with ARIA Attributes -->
<button aria-describedby="tooltip3">More Details</button>
<div id="tooltip3" role="tooltip" hidden>
    Additional information about this feature.
</div>

3.6.5 Responsive Design

Ensure that tooltips are responsive and do not obstruct other content, especially on smaller screens. Consider positioning tooltips dynamically to avoid overlap.

/* Tooltip Styling */
[role="tooltip"] {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.9rem;
    max-width: 200px;
    z-index: 1000;
}

/* Tooltip Positioning */
button[aria-describedby]:hover + [role="tooltip"],
button[aria-describedby]:focus + [role="tooltip"] {
    display: block;
}

3.6.6 Testing Tooltips for Accessibility

Test tooltips with assistive technologies to ensure they are announced correctly and function as intended. Verify that ARIA attributes, keyboard navigation, and focus behaviors are implemented correctly.

// Test Checklist
// - Verify that the tooltip is announced by screen readers when the trigger element is focused.
// - Ensure tooltips are keyboard accessible and visible on hover and focus.
// - Validate that the tooltip does not overlap important content.

Best Practices for Tooltips

  • Use ARIA Attributes: Associate tooltips with their trigger elements using aria-describedby and role="tooltip".
  • Ensure Keyboard Accessibility: Make tooltips accessible via focus and dismissible using the keyboard.
  • Provide Visible Cues: Ensure tooltips are visible on hover and focus for both mouse and keyboard users.
  • Design for Responsiveness: Avoid obstructing content by dynamically positioning tooltips.
  • Test Thoroughly: Regularly test tooltips with assistive technologies to identify and resolve accessibility issues.