/* === Tooltips === * Rendered in via JS to avoid overflow:hidden clipping. * Arrow auto-positions via .tooltip--top/bottom/left/right. */ .tooltip { position: absolute; z-index: var(--z-tooltip); padding: var(--spacing-sm) var(--spacing-md); background: var(--color-text); color: var(--color-white); font-size: var(--text-xs); line-height: var(--leading-normal); border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast) var(--ease-out); } .tooltip--visible { opacity: 1; } /* Arrow */ .tooltip::after { content: ''; position: absolute; width: 6px; height: 6px; background: var(--color-text); transform: rotate(45deg); } .tooltip--top::after { bottom: -3px; left: 50%; margin-left: -3px; } .tooltip--bottom::after { top: -3px; left: 50%; margin-left: -3px; } .tooltip--left::after { right: -3px; top: 50%; margin-top: -3px; } .tooltip--right::after { left: -3px; top: 50%; margin-top: -3px; }