XDS — Design System

Tooltip@xds/core v0.0.13 · XDSTooltip

Usage

A short text hint that appears on hover or focus, anchored to a trigger element. Use it to describe icon-only buttons, show the full text of truncated labels, or provide supplementary context without cluttering the UI.

ts
import {XDSTooltip} from '@xds/core/Tooltip'

Best practices

Guidance	Practices
Do	Keep tooltip content concise — aim for under 140 characters of plain text.
Do	Add a tooltip to icon-only buttons and controls that lack a visible label.
Don't	Place interactive elements like links or buttons inside a tooltip — use HoverCard or Popover instead.
Don't	Use tooltips for essential information that users must see to complete a task.

Examples

Common configurations, variations, and states.

Tooltip — Action Bar

Tooltips on an action button bar with contextual descriptions.

Tooltip — Hook Usage

Tooltip using the useXDSTooltip hook for programmatic control.

Tooltip — Inline Text

Tooltips on inline text terms for definitions.