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.

Sub-components

Tooltip is a compound component with 1 sub-component.

XDSTooltip

Component wrapper for tooltip display triggered on hover or focus.

Prop	Type	Description
children	ReactNode	Trigger element(s) that activate the tooltip.
anchorRef	RefObject<HTMLElement>	External anchor ref for sibling mode.
content	ReactNode	Tooltip content, typically short text.
placement	LayerPlacement (default: 'above')	Position relative to the anchor element.
alignment	LayerAlignment (default: 'center')	Alignment along the placement axis.
delay	number (default: 200)	Show delay in milliseconds.
hideDelay	number (default: 0)	Hide delay in milliseconds.
focusTrigger	'auto' \| 'always' \| 'never' (default: 'auto')	Controls when focus events trigger the tooltip.
isEnabled	boolean (default: true)	Enables or disables the tooltip triggers.
onOpenChange	(isOpen: boolean) => void	Callback fired when tooltip visibility changes. Called with true when shown and false when hidden.
hasHoverIndication	'auto' \| boolean (default: 'auto')	Shows a dashed underline on the trigger element.
isDefaultOpen	boolean	Whether the tooltip should be shown on mount. Still dismissible.

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.

Usage

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.

Prop

Type

Description

children

ReactNode

Trigger element(s) that activate the tooltip.

anchorRef

RefObject<HTMLElement>

External anchor ref for sibling mode.

content

ReactNode

Tooltip content, typically short text.

placement

LayerPlacement (default: 'above')

Position relative to the anchor element.

alignment

LayerAlignment (default: 'center')

Alignment along the placement axis.

delay

number (default: 200)

Show delay in milliseconds.

hideDelay

number (default: 0)

Hide delay in milliseconds.

focusTrigger

'auto' | 'always' | 'never' (default: 'auto')

Controls when focus events trigger the tooltip.

isEnabled

boolean (default: true)

Enables or disables the tooltip triggers.

onOpenChange

(isOpen: boolean) => void

Callback fired when tooltip visibility changes. Called with true when shown and false when hidden.

hasHoverIndication

'auto' | boolean (default: 'auto')

Shows a dashed underline on the trigger element.

isDefaultOpen

boolean

Whether the tooltip should be shown on mount. Still dismissible.