Tooltip Token

A focused card set for the shared top-overlay tooltip treatment used by compact controls, truncated labels, and governed navigation recovery.

Control Token

Tooltip Surface

Shared tooltip variables cover surface, ink, elevation, geometry, arrow size, and overlay order.

Paragraph Content

The preview establishes readable wrapping, max width, and max height for tooltips that need more than a short label.

This tooltip carries a short paragraph so the token can prove line wrapping, vertical rhythm, and overflow behavior before longer help text appears in governed app controls.

--tooltip-max-width: 20rem; --tooltip-max-height: min(12rem, calc(100vh - 2rem));

Clipped host container

Tooltip Escape Layer

Real tooltips render in the shared fixed overlay layer attached to the document, not inside the clipped control container that triggered them.

Target Top placement prefers the vertical axis above the anchor.

Target Right placement aligns beside the anchor and clamps to viewport.

Target Bottom placement appears below when top space is unavailable.

Target Left placement mirrors right placement for constrained side rails.

Surface

background

--tooltip-bg: rgba(22, 27, 38, 0.96);

Ink

foreground

--tooltip-fg: #f8faff;

Elevation

shadow

--tooltip-shadow: 0 0.7rem 1.8rem rgba(15, 31, 45, 0.2);

Shape

radius

--tooltip-radius: 0.25rem;

Arrow

size

--tooltip-arrow-size: 0.5rem;

Layer

top overlay

--tooltip-layer: 2147483000;

Typography

paragraph

typography: paragraph.mainMinor / .token-paragraph-main-minor;

Content Bounds

paragraph

--tooltip-max-width: 20rem; --tooltip-max-height: min(12rem, calc(100vh - 2rem));

Placement

fallback

placement: top | right | bottom | left with viewport clamping and opposite-side fallback;

Escape Layer

fixed

host: document.body / #shared-floating-tooltip; position: fixed; overflow source: unclipped;