Overview

Tooltips provide supplementary text that appears when a user hovers over or focuses on a trigger element. However, native browser tooltips (via the title attribute) are notoriously inaccessible — they cannot be triggered by keyboard, disappear immediately when the pointer moves, and are invisible to touch-screen users. WCAG 1.4.13 requires that content shown on hover or focus must be dismissible, hoverable, and persistent. Toggletips solve the mobile problem entirely by using click/tap instead of hover.

WCAG Criteria:

• 1.4.13 Content on Hover or Focus  — hover/focus-triggered content must be dismissible (Escape), hoverable (pointer can move to it), and persistent (stays visible until dismissed)
• 4.1.2 Name, Role, Value  — supplementary content must be programmatically associated with its trigger

Key requirements:

• Never rely solely on the title attribute for important information
• Tooltips must appear on both hover and keyboard focus
• Users must be able to dismiss tooltip content with Escape
• Users must be able to hover over the tooltip itself without it disappearing
• Never place interactive elements (links, buttons) inside tooltips
• For mobile/touch contexts, prefer toggletips (click/tap triggered) over hover tooltips

Tooltip

<!-- title attribute — hover only, no keyboard, no mobile, no persistence -->
<button title="Send your form">Submit</button>

<!-- ARIA tooltip — shows on hover AND focus, Escape dismisses -->
<div
  onmouseenter="showTip()"
  onmouseleave="hideTipUnlessFocused()"
  onkeydown="if (event.key === 'Escape') hideTip()"
>
  <button
    aria-describedby="tip"
    onfocus="showTip()"
    onblur="hideTip()"
  >
    Submit
  </button>
  <span role="tooltip" id="tip">
    Send your form
  </span>
</div>

What’s wrong with the title attribute tooltip?

• Only appears on mouse hover — keyboard users never see it
• Disappears as soon as the pointer moves away from the element
• Not visible on touch devices (no hover state)
• Cannot be dismissed with Escape
• Screen readers may or may not read it, depending on user settings
• Tiny default font with no way to style it

What the ARIA tooltip pattern provides:

• Appears on both hover and keyboard focus
• role="tooltip" tells assistive technology the element is supplementary text
• aria-describedby links the trigger to the tooltip content
• Escape key dismisses the tooltip (WCAG 1.4.13 — dismissible)
• pointer-events: auto on the tooltip means users can hover over it (WCAG 1.4.13 — hoverable)
• Tooltip persists while hover or focus is maintained (WCAG 1.4.13 — persistent)

What the screen reader announces:

Toggletip

<!-- Hover-only info icon — no keyboard, no mobile support -->
<span>Password</span>
<span
  class="info-icon"
  onmouseenter="showInfo()"
  onmouseleave="hideInfo()"
>
  ?
  <span class="hover-info">
    Must be at least 8 characters
  </span>
</span>

<!-- Toggletip — click/tap triggered, works everywhere -->
<span>Password</span>
<button aria-label="More info" onclick="toggleInfo()">
  ?
</button>
<span id="info" aria-live="polite"></span>
 
<script>
  function toggleInfo() {
    var el = document.getElementById('info');
    var shown = el.textContent !== '';
    el.textContent = shown
      ? ''
      : 'Must be at least 8 characters';
  }
</script>

What’s wrong with the hover-only info icon?

• Uses a <span> instead of a <button> — not focusable or clickable for keyboard users
• Only triggered by mouse hover — completely invisible on mobile/touch devices
• No role, no aria-label — screen readers announce nothing meaningful
• Cannot be dismissed with Escape
• Users cannot hover over the info text itself

What the toggletip pattern provides:

• Uses a real <button> — focusable, activatable via Enter/Space, and tappable on mobile
• aria-label="More info" gives the button an accessible name
• Click/tap toggles the supplementary text — works on all devices
• aria-live="polite" ensures screen readers announce the text when it appears
• Text is injected into an existing live region (not dynamically created)
• No hover dependency — fully functional on touch screens

What the screen reader announces:

Key Teaching Points

• WCAG 1.4.13 requires three things for hover/focus content: it must be dismissible (Escape key), hoverable (pointer can move to the tooltip without it vanishing), and persistent (stays visible until the user dismisses it or moves focus)
• Tooltips are inherently problematic on mobile because there is no hover state — toggletips solve this by being click/tap triggered
• Never put interactive elements inside tooltips — links, buttons, or form controls inside a tooltip are unreachable for keyboard and screen reader users
• Toggletips are the more robust pattern — they work on desktop, mobile, and with assistive technology without any hover dependency
• The title attribute is not a tooltip replacement — it has poor screen reader support, cannot be styled, and fails every criterion of WCAG 1.4.13

Resources

• WAI-ARIA Authoring Practices — Tooltip 
• Inclusive Components — Tooltips & Toggletips 
• WCAG 1.4.13 — Content on Hover or Focus 
• WCAG 4.1.2 — Name, Role, Value 
• Heydon Pickering — Tooltips in the time of WCAG 2.1 
• MDN — ARIA: tooltip role