/** * Custom tooltip component (JS-driven floating div). * Styled as a dark rounded popup with an arrow, appended to * so it is never clipped by parent overflow. */ .tooltip { position: fixed; padding: 6px 12px; background: #2a2a2e; color: #fff; font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); text-align: center; white-space: normal; max-width: 260px; width: max-content; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-tooltip); pointer-events: none; opacity: 0; transition: opacity 150ms ease; } .tooltip--visible { opacity: 1; } .tooltip__text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-align: left; } .tooltip__arrow { position: absolute; left: 50%; transform: translateX(-50%); border: 6px solid transparent; } /* Arrow pointing down (tooltip is above the element) */ .tooltip--top .tooltip__arrow { top: 100%; border-top-color: #2a2a2e; } /* Arrow pointing up (tooltip is below the element) */ .tooltip--bottom .tooltip__arrow { bottom: 100%; border-bottom-color: #2a2a2e; }