.mgt-tooltip-term { position: relative; display: inline-block; border-bottom: 1px dotted currentColor; cursor: help; text-decoration: none; } .mgt-tooltip-term__text { position: relative; z-index: 1; } /* Hidden source bubble. The original bubble stays inside the content so the PHP markup remains simple, but the visible tooltip is cloned into by glossary-tooltips.js. This avoids clipping from parent blocks with overflow, transforms, filters, sliders, accordions, cards, columns, or local stacking contexts. */ .mgt-tooltip-term > .mgt-tooltip-term__bubble { display: none; } .mgt-tooltip-term__bubble { width: 21rem; max-width: min(21rem, 86vw); padding: 0; border-radius: 0.75rem; background: #ffffff; color: #172033; font-size: 0.875rem; line-height: 1.45; font-weight: 400; text-align: left; box-shadow: 0 1rem 2.25rem rgba(15, 23, 42, 0.2); border: 1px solid rgba(15, 23, 42, 0.12); white-space: normal; overflow: visible; user-select: text; } /* Visible floating tooltip. 2147483647 is the practical maximum z-index used to sit above normal site UI. */ .mgt-tooltip-term__bubble--floating { position: fixed; z-index: 2147483647; display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(0.25rem); transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease; } .mgt-tooltip-term__bubble--floating.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .mgt-tooltip-term__bubble--floating::after { content: ''; position: absolute; left: 50%; width: 0; height: 0; transform: translateX(-50%); filter: drop-shadow(0 0.2rem 0.15rem rgba(15, 23, 42, 0.08)); } .mgt-tooltip-term__bubble--above::after { top: 100%; border-left: 0.45rem solid transparent; border-right: 0.45rem solid transparent; border-top: 0.45rem solid #ffffff; } .mgt-tooltip-term__bubble--below::after { bottom: 100%; border-left: 0.45rem solid transparent; border-right: 0.45rem solid transparent; border-bottom: 0.45rem solid #ffffff; } .mgt-tooltip-term__inner { display: grid; grid-template-columns: 4.75rem 1fr; gap: 0.75rem; padding: 0.75rem; border-radius: 0.75rem; background: #ffffff; overflow: hidden; } .mgt-tooltip-term__image-wrap { display: block; width: 4.75rem; height: 4.75rem; border-radius: 0.55rem; overflow: hidden; background: #f3f4f6; } .mgt-tooltip-term__image { display: block; width: 100%; height: 100%; object-fit: cover; } .mgt-tooltip-term__content { display: block; min-width: 0; } .mgt-tooltip-term__title { display: block; margin-bottom: 0.25rem; color: #0f172a; font-size: 0.925rem; font-weight: 700; line-height: 1.25; user-select: text; } .mgt-tooltip-term__description { display: block; color: #334155; font-size: 0.8125rem; font-weight: 400; line-height: 1.45; user-select: text; } .mgt-tooltip-term__link { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.55rem; padding: 0.28rem 0.55rem; border-radius: 999px; background: #eef6ff; color: #075985; font-size: 0.75rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; pointer-events: auto; } .mgt-tooltip-term__link:hover, .mgt-tooltip-term__link:focus { background: #dbeafe; color: #0c4a6e; text-decoration: none; } .mgt-tooltip-term:focus { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 0.125rem; } .mgt-tooltip-term.is-active { border-bottom-style: solid; } .mgt-tooltip-term__bubble:not(:has(.mgt-tooltip-term__image-wrap)) .mgt-tooltip-term__inner { display: block; } @media (max-width: 640px) { .mgt-tooltip-term__bubble--floating { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; top: auto; width: auto; max-width: none; transform: translateY(0.25rem); } .mgt-tooltip-term__bubble--floating.is-active { transform: translateY(0); } .mgt-tooltip-term__bubble--floating::after { display: none; } .mgt-tooltip-term__inner { grid-template-columns: 4rem 1fr; gap: 0.65rem; padding: 0.75rem; } .mgt-tooltip-term__image-wrap { width: 4rem; height: 4rem; } } @media (prefers-reduced-motion: reduce) { .mgt-tooltip-term__bubble--floating { transition: none; } }