Astryx Design System

Tooltip@astryxdesign/core v0.0.15 · Tooltip

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 {Tooltip} from '@astryxdesign/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 useTooltip hook for programmatic control.

Tooltip — Inline Text

Tooltips on inline text terms for definitions.