.glossary-tooltip { position: relative; /* Thin underline pinned to the bottom of the line so it never rides up into the copy, distinct from hyperlinks. Drawn as a background line (not text-decoration) so it sits clear of descenders and wraps cleanly across multiple lines. */ background-image: linear-gradient(var(--color-brand-pale-blue), var(--color-brand-pale-blue)); background-repeat: no-repeat; background-size: 100% 3px; background-position: 0 100%; cursor: help; display: inline; } /* Bubble is appended to by JS so it is never clipped by overflow:hidden */ .glossary-tooltip__bubble { position: absolute; background: var(--color-brand-teal); color: var(--color-primary-white); padding: 8px 12px; border-radius: 4px; font-size: 1.4rem; line-height: 1.4; white-space: normal; width: max-content; max-width: 280px; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity 0.15s ease; } .glossary-tooltip__bubble--visible { opacity: 1; } /* Arrow pointing down (default: bubble is above trigger) */ .glossary-tooltip__bubble::after { content: ""; position: absolute; top: 100%; left: var(--arrow-left, 50%); transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--color-brand-teal); } /* Arrow pointing up (bubble flipped below trigger near top of viewport) */ .glossary-tooltip__bubble--below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--color-brand-teal); }