Components

Tooltips

CSS-first tips: .wckd-tooltip + data-tooltip for short text, or .tooltip-wrap + sibling .tooltip-content when you need HTML. Prefer <button type="button" class="button text wckd-tooltip"> as the trigger; wckd-ui.js optionally clamps edges.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Data-tooltip

Set data-tooltip for short tips. Prefer <button type="button" class="button text wckd-tooltip"> as the trigger so keyboard users reach it.

Markup

<button type="button" class="button text wckd-tooltip" data-tooltip="Label">Term</button>

Configuration options

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

Sibling content

Leave data-tooltip empty and pair .wckd-tooltip + sibling .tooltip-content inside .tooltip-wrap for richer HTML.

Use em, code, and short phrasing; the layer uses pointer-events: none so it stays non-interactive, put links in the main content instead.

Markup

<span class="tooltip-wrap">
  <button type="button" class="button text wckd-tooltip">Term</button>
  <span class="tooltip-content">Richer HTML than <code>data-tooltip</code> allows.</span>
</span>

When to use

  • Icon-only control affordances in dense toolbars or tables (pair with a visible aria-label on the control if the icon is the only copy).
  • Short glossary terms in editorial content where a footnote would be heavier than a hover on desktop.
  • Focus-parity: keyboard users tab to the trigger (button by default) and get the same surface as on hover.

Implementation notes

  • If both data-tooltip and a following .tooltip-content are present, the data attribute takes precedence; the rule in the sheet keeps the sibling from displaying as a second layer.
  • This pattern is for non-critical hints only, not a replacement for visible labels, aria-describedby on form fields, or the disclosure/collapsible patterns for long help.
  • The bubble uses ::after on .wckd-tooltip; avoid nesting interactive content inside the trigger in ways that break focus order.

Developer checklist

  • Keep copy under a sentence; move longer explanations to a modal, “Learn more” link, or the Collapsible toggle component.
  • Verify the tooltip is not the only place critical compliance or error text appears.
  • Test in reduced-motion environments: opacity still transitions; ensure intent is clear without motion.

← All components