/* =========================== * Tooltip — passive text-only hover/focus label * =========================== * One shared .tooltip node (js/tooltip.js) appended to , repositioned * per trigger. Dark default / light opt-in; dynamic arrow; multi-line 320px. * Source of truth: Figma node 5904:5199. Spec: docs/specs/2026-06-04-tooltip-design.md * Two new component tokens (--tooltip-bg/-fg); everything else reuses tokens. * =========================== */ .tooltip { position: fixed; top: 0; left: 0; z-index: var(--z-dropdown); max-width: var(--tooltip-max-width, 320px); margin: 0; padding: var(--spacing-1) var(--spacing-2); /* 4px 8px */ border-radius: var(--radius-xs); /* 4px */ background: var(--tooltip-bg); color: var(--tooltip-fg); font-family: var(--font-primary); font-size: var(--font-size-xs); /* 12px */ line-height: var(--line-height-xs); /* 16px */ font-weight: var(--font-weight-regular); text-align: left; pointer-events: none; /* a label — never traps the cursor */ opacity: 0; transition: opacity 120ms ease, transform 120ms ease; } .tooltip[hidden] { display: none; } .tooltip.is-visible { opacity: 1; transform: none; } /* Light theme (surface-matched, attribute-selected) */ .tooltip[data-theme="light"] { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-secondary); box-shadow: var(--shadow-lg); } /* Arrow — rotated-square caret; offset along the edge via --tooltip-arrow-pos */ .tooltip-arrow { position: absolute; width: 8px; height: 8px; background-color: inherit; /* matches the tooltip bg */ transform: rotate(45deg); } /* Placement: top (tooltip above trigger; arrow on bottom edge) */ .tooltip[data-placement="top"] { transform: translateY(2px); } .tooltip[data-placement="top"] .tooltip-arrow { bottom: -4px; left: var(--tooltip-arrow-pos, 50%); margin-left: -4px; } .tooltip[data-placement="top"][data-theme="light"] .tooltip-arrow { border-right: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary); } /* bottom */ .tooltip[data-placement="bottom"] { transform: translateY(-2px); } .tooltip[data-placement="bottom"] .tooltip-arrow { top: -4px; left: var(--tooltip-arrow-pos, 50%); margin-left: -4px; } .tooltip[data-placement="bottom"][data-theme="light"] .tooltip-arrow { border-left: 1px solid var(--border-secondary); border-top: 1px solid var(--border-secondary); } /* left */ .tooltip[data-placement="left"] { transform: translateX(2px); } .tooltip[data-placement="left"] .tooltip-arrow { right: -4px; top: var(--tooltip-arrow-pos, 50%); margin-top: -4px; } .tooltip[data-placement="left"][data-theme="light"] .tooltip-arrow { border-top: 1px solid var(--border-secondary); border-right: 1px solid var(--border-secondary); } /* right */ .tooltip[data-placement="right"] { transform: translateX(-2px); } .tooltip[data-placement="right"] .tooltip-arrow { left: -4px; top: var(--tooltip-arrow-pos, 50%); margin-top: -4px; } .tooltip[data-placement="right"][data-theme="light"] .tooltip-arrow { border-bottom: 1px solid var(--border-secondary); border-left: 1px solid var(--border-secondary); } @media (prefers-reduced-motion: reduce) { .tooltip { transition: opacity 1ms linear; transform: none; } }