Components

Tooltips

Tooltip visuals are CSS-first on .wckd-tooltip: use data-tooltip for short strings, or .tooltip-wrap with a sibling .tooltip-content for richer markup (non-empty data-tooltip hides the sibling). Add tabindex="0" when the trigger is not focusable by default. Hover and :focus-visible reveal the layer; wckd-ui.js now adds optional edge clamping classes so tips stay in viewport near screen edges.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing this component.

Default implementation

Data-tooltip

Set data-tooltip to the string shown above the element. The pseudo-element in wckd-ui-components.css handles positioning, width limits, and shadow.

Data-tooltip mode

Markup

<span class="wckd-tooltip" tabindex="0" data-tooltip="Label">Term</span>

Configuration options

Start from the default implementation, then apply one of these intent-driven variations based on your content and interaction goals.

Sibling content

When you omit data-tooltip (or leave it empty) and use .tooltip-wrap, the adjacent .tooltip-content is revealed on hover/focus. This mode can hold richer structure than a single data attribute string.

Sibling mode 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">
  <span class="wckd-tooltip" tabindex="0">Term</span>
  <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 can tab to a span with tabindex="0" and see 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