i

Tooltip

Interrupting and annotating · researched

A small label that appears on hover or focus to name or briefly explain an element.

atom

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Tooltip native: no antd 6.6.5
Variants
—
Sizes
—
States documented
default, disabled
Accessibility guidance
no

Default trigger is hover only; keyboard focus needs trigger to include focus or a ConfigProvider setting. color prop is free-form.

3 corrected on re-read
  • builds_on_native: "unread" → "no" rc-tooltip popup is div role=tooltip
  • states_documented: ["default"] → ["default","disabled"] A Disabled demo is listed; no state props documented
  • a11y_documented: "unread" → "no" Page read in full; no accessibility section or aria guidance

docs ↗ · code ↗

Carbon

Tooltip native: no @carbon/react 1.117.0
Variants
—
Sizes
—
States documented
hover, focus
Accessibility guidance
yes

Source is a Popover with role=tooltip, not native. Docs also name a definition tooltip variant; Toggletip is a separate component for interactive content.

1 corrected on re-read
  • states_documented: [] → ["hover","focus"] usage.mdx States: two states, on (hover and focus) and closed

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Looked at the Components index (design-system.service.gov.uk/components/), the govuk-frontend src/govuk/components directory listing, and the direct URL /components/tooltip/ (404). Details is the nearest disclosure component but is not a tooltip.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Not in repo root directories (github.com/material-components/material-web), docs/components/ (button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field) or labs/. Roadmap lists Tooltip as an unbuilt component.

Primer

Tooltip native: no @primer/react 38.40.1
Variants
label, description
Sizes
—
States documented
—
Accessibility guidance
yes

Has type label or description and delay short/medium/long. Source (TooltipV2) uses the popover attribute with a polyfill.

3 corrected on re-read
  • builds_on_native: "partly" → "no" Tooltip renders <span> with popover attr (polyfilled) and role=tooltip for description type; no native element
  • variants: null → ["label","description"] type prop label|description in source; docs show 'As a label for its trigger'
  • a11y_documented: "unread" → "yes" Read /accessibility/: expectations, Keyboard, Pointer device, Screen reader

docs ↗ · code ↗

Spectrum

Tooltip native: no @spectrum-web-components/button 1.12.4
Variants
neutral, informative, negative
Sizes
—
States documented
default
Accessibility guidance
yes

Placement options (top, bottom, left, right, start, end) are separate. SWC renders divs/spans, not a native popover or title attribute.

docs ↗ · code ↗

USWDS

Tooltip native: partly @uswds/uswds 3.14.0
Variants
—
Sizes
—
States documented
—
Accessibility guidance
yes

Variants are positions. Progressive enhancement of the title attribute.

1 corrected on re-read
  • variants: ["top","bottom","right","left"] → [] Page: 'This component has no variants.' Top/right/bottom/left is the data-position attribute

docs ↗ · code ↗

Platform facts

Native elementtitle attribute (global); popover="hint" is a related mechanismtitle is a global attribute; MDN says its use is highly problematic for touch-only devices, keyboard users, assistive-technology users, fine-motor impairment and cognitive concerns, and recommends a more accessible technique if a tooltip effect is desired. MDN does not say 'hover only' in those words. popover="hint" is in the spec (hint: closes other hint popovers, not auto popovers; has light dismiss and responds to close requests) and MDN says hint popovers are usually shown by mouseover/focus events; BCD: Chrome/Edge 151, Firefox 153, Safari preview. interestfor appears on button in BCD (Chrome/Edge 142, experimental, non-standard) but is NOT in the WHATWG spec (zero occurrences) and MDN has no page for it.
Baselineunavailable
APG patterntooltip
ARIA roletooltip
Shipped by5 of 7 systems

Anatomy

  1. trigger — APG roles section: 'The element that triggers the tooltip references the tooltip element with aria-describedby'; keyboard note says 'trigger element'.
  2. tooltip — APG: the element that serves as the tooltip container has role tooltip.

Keys the APG binds

  • EscapeDismisses the Tooltip.

The seven states

default Hidden until the trigger is hovered or focused.
hover Pointer over the trigger shows it; not defined in detail by APG.
focus Keyboard focus on the trigger should show it; APG page is a work in progress.
active n/a — A passive element with no pressed state.
disabled n/a — No disabled state of its own; it follows its trigger.
error n/a — Informational text, no value to validate.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 8 of 35 fields changed on the second read — open any “corrected” note to see what it said before.