Tooltip

​

What it is

A label that appears when a reader hovers, focuses, or taps the element it describes, and disappears on its own when they move away — no click required to open or close it. Its title accepts plain text or arbitrary React content, which published stories demonstrate up to and including a full Alert rendered inside one.

​

Live example

​

Exports

Hand-confirmed from source — no prop emitter has run for this component yet. The component itself is a typed passthrough with no prop interface of its own beyond the underlying primitive’s.

​

Choose Tooltip when

• The content is a short label or clarification for a specific element, and disappearing the instant the reader moves away is the correct behavior.
• No click or dismissal action should be needed — the reader is looking, not interacting.

​

Choose something else when

​

Anatomy

​

Variants, sizes, and states

No size prop exists — a Tooltip sizes to its content, with no maxWidth on the base component (see IconWithTooltip for a sibling composition that does add one). Twelve placement options, confirmed against source’s own argTypes. Published stories demonstrate three real content patterns: plain text, rich React content (a bold warning-colored heading plus body text), and the same rich content inside a wider container to show text-wrapping behavior at larger widths.

​

Edge and failure states

• A falsy title — empty string, undefined, null, or false — never renders anything. Stated directly in the component’s own argTypes description, not inferred.
• Rich content inside a Tooltip includes styling for a nested <h4> and a nested Alert, confirmed from the theme override — meaning composing structured content into a Tooltip is an anticipated, styled pattern here, not an unsupported edge case.

​

Tokens

Hand-confirmed from Tooltip.overrides.ts — no per-component token emitter exists yet for this concept, so this table is hand-confirmed rather than generated. A nested <h4> inside tooltip content is restyled to the canonical caption-bold type scale, and a nested Alert is forced to full width — both confirmed directly from the override.

​

Composition

IconWithTooltip is a separate, related export — an icon button pre-wired with a tooltip, adding its own iconName, iconSize, and tooltipMaxWidth props (default max width: 300px, via the icon-with-tooltip-max-width token). It is not documented in depth on this page. Notably, its source imports the underlying tooltip primitive directly rather than this package’s own Tooltip export — confirmed by reading both files — though since this page’s Tooltip is itself an unmodified passthrough of that same primitive, the two render identically today.

​

Content

No copy rules are recorded in source, beyond the falsy-title suppression behavior noted above.

​

Accessibility

• No test in source asserts a specific ARIA role or attribute for Tooltip itself — unconfirmed at the Titan layer, beyond what the underlying primitive provides by default (typically an aria-describedby relationship to the anchor element).
• Nothing in source marks the arrow decoration aria-hidden or otherwise excludes it from the accessibility tree — unconfirmed whether it is announced.

​

Constraints

No falsifiable, source-backed constraint beyond the documented edge cases is recorded for this component.

​

Known issues

​

Why it works this way

Tooltip carries real, bespoke type tokens instead of reusing a canonical Typography variant. The override’s own comment records that the 0.85rem/1rem ramp is preserved byte-for-byte from a legacy value with no canonical variant matching it exactly — a deliberate compatibility choice, not an oversight.

​

Status

​

Related

Hand-confirmed from utilization.md — no utilization emitter has run for this component yet. 54 usages across 14 applications, the heaviest being interaction-details (11), ai-model-management (7), and call-review-flow (6) — the highest adoption of any component in this category.

• Popover — the alternative for content that should stay open until dismissed
• Alert — a component the theme explicitly styles to render correctly nested inside a Tooltip