/* ═══════════════════════════════════════════════════════════ TOOLTIP — token-driven, JS-positioned body portal Markup: Modifiers (on the trigger element, combinable): .tt-light light surface, for text/data content .tt-bottom prefer opening below (elements near the top edge) .tt-right prefer opening to the right (elements near the left edge) The tooltip node itself (`.app-tooltip`) is appended to by js/tooltip.js and positioned with position:fixed, so it escapes every `overflow:hidden/auto` ancestor (table cells, popovers, dropdowns) and never adds scroll to its container. This file only styles it. Icon-only triggers should also carry aria-label="…" (same text) — the tooltip is decorative; the label is what assistive tech reads. ═══════════════════════════════════════════════════════════ */ .app-tooltip { position: fixed; top: 0; left: 0; z-index: 4000; pointer-events: none; max-width: 260px; white-space: nowrap; background: var(--color-bg-sidebar); color: var(--color-text-on-sidebar); font-size: 12.5px; font-weight: 500; line-height: 1.4; padding: 6px 10px; border-radius: var(--radius-sm); box-shadow: 0 4px 12px var(--color-shadow-lg); opacity: 0; visibility: hidden; transition: opacity 0.13s ease; } .app-tooltip.app-tooltip--visible { opacity: 0.9; visibility: visible; } /* wraps when the text is long (set by JS when it would overflow max-width) */ .app-tooltip.app-tooltip--wrap { white-space: normal; } /* light surface — for table/text content */ .app-tooltip.app-tooltip--light { background: var(--color-surface-default); color: var(--color-text-primary); border: 1px solid var(--color-border-default); box-shadow: 0 6px 16px var(--color-shadow-md); } @media (prefers-reduced-motion: reduce) { .app-tooltip { transition: none; } }