Tooltip

A short label for an icon button or a hint, shown on hover and focus.

Needs dsgn.js components/tooltip.css

Description on hover and focus

<button class="dsgn-icon-button" data-variant="ghost" data-intent="neutral" aria-label="Duplicate" aria-describedby="dx-tip"><span class="dsgn-icon" aria-hidden="true">content_copy</span></button>
<div class="dsgn-tooltip" id="dx-tip" role="tooltip" popover="manual">Copies the invoice as a new draft</div>

Usage

Short supplementary text only; never the only place for essential information and never interactive content. Shows on hover (after a short delay) and on keyboard focus, hides on Escape, blur and pointer leave, and stays open while the pointer is over it (WCAG 1.4.13). An icon-only button keeps its aria-label: the tooltip adds a description, not the name.

Details

Classes: .dsgn-tooltip
Tokens used: --dsgn-duration-fast --dsgn-ease --dsgn-font-sans --dsgn-font-size-caption --dsgn-font-weight-regular --dsgn-line-height-caption --dsgn-neutral-solid --dsgn-neutral-solid-text --dsgn-radius-s --dsgn-space-4 --dsgn-space-8
In Figma: Tooltip
Import alone: dsgn.systems/components/tooltip.css