Skip to content
Work in progress - do not use in production. This component is still being built: it is not flagged Ready for Dev, so its markup, attributes, events and styles can all still change without notice, it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work can be seen and reviewed - nothing more.

Tooltip

A tooltip that shows contextual content on hover or focus, rendered as <span is="root-tooltip">.

Usage

 
<span is="root-tooltip" content="Copy to clipboard">
  <i is="root-icon" icon="clipboard"></i>
</span>

The tooltip panel is created automatically from the content/tooltip attribute (or reuses a sibling [tooltip-panel] if one already exists) and is positioned off the trigger via CSS anchor positioning, with a position: fixed fallback for browsers without it.

Attributes
Attribute Type Default Description
content string - Tooltip text (alias: tooltip)

Events
Event Detail Description
root-tooltip.show - Fired when the tooltip shows
root-tooltip.hide - Fired when the tooltip hides

Accessibility

aria-describedby only supplements an existing accessible name - it is never a substitute for one. The trigger's ARIA relationship to the panel is therefore chosen automatically:

  • If the trigger already has an accessible name (visible text content, or an explicit aria-label), the panel is wired with aria-describedby.
  • If it doesn't - an icon-only trigger like the example above - the panel becomes the trigger's accessible name via aria-labelledby instead, so an icon button is never announced as unlabeled. aria-labelledby isn't permitted on the implicit generic role a bare <span> otherwise has, so this also defaults role="button" (unless the author already set a role).

See Jake Archibald's writeup of the failure mode this avoids.

Extends

HTMLSpanElement - use with <span is="root-tooltip">.