Skip to content
aidsgnaidsgnaidsgn

Tooltip

aidsgn-tooltip adds a short, non-essential description to a control. Focus or hover the trigger below; press Escape to dismiss the visible tooltip without moving focus.

Save changes

<aidsgn-tooltip placement="bottom">
  <button data-aidsgn-tooltip-trigger aria-describedby="save-tooltip">Save</button>
  <span id="save-tooltip" role="tooltip">Save changes</span>
</aidsgn-tooltip>

The trigger must be focusable, carry data-aidsgn-tooltip-trigger, and reference the tooltip’s unique ID through aria-describedby. Tooltip content uses role="tooltip" and must contain text only—use a disclosure or Popover pattern for interactive content.

placement accepts top, bottom, start, and end. Chrome and Safari use native CSS Anchor Positioning with opposite-side overflow fallbacks. Firefox receives a logical absolute-position fallback with the same hover, focus, Escape, RTL, and accessible-description behavior.

The component uses CSS for positioning and visibility. Its only JavaScript listens for Escape and resets dismissal when pointer or focus leaves. Customize spacing with --aidsgn-tooltip-gap and width with --aidsgn-tooltip-max-inline-size.

Reduced-motion preferences remove both the opacity transition and reveal delay, so hover and focus show the tooltip immediately.

Usage guidelines

Section titled “Usage guidelines”
A focused icon button reveals the short Tooltip Save changes.A focused icon button reveals the short Tooltip Save changes.
Do

Add brief supplementary context

Use Tooltip for a short description that appears when its control is focused or hovered.

A keyboard-focused Information button reveals a brief Tooltip describing account security.A keyboard-focused Information button reveals a brief Tooltip describing account security.
Do

Keep the trigger and content accessible

Ensure the trigger is keyboard reachable and the description remains useful but non-essential.

A simulated Tooltip contains a required password instruction and an Update password button.A simulated Tooltip contains a required password instruction and an Update password button.
Don’t

Avoid interaction and critical instructions

Keep controls and information people must act on outside the transient Tooltip surface.

A visible Save changes button is paired with a Tooltip that merely repeats Save changes.A visible Save changes button is paired with a Tooltip that merely repeats Save changes.
Don’t

Avoid redundant explanations

Improve an unclear control directly instead of repeating its visible label or compensating with a Tooltip.