/* ============================================================================ AlphaTooltip ---------------------------------------------------------------------------- A single shared tooltip is rendered into by alphaTooltip.js (.alpha-global-tooltip). Being position:fixed on , it escapes any ancestor's overflow:hidden/auto/scroll clipping and any stacking context. The component itself is plain markup with data-* attributes; this stylesheet only needs the trigger wrapper and the body-level tooltip. Theming: a trigger may carry data-alpha-tooltip-class; alphaTooltip.js copies those class(es) onto .alpha-global-tooltip while that trigger is showing it, so global CSS can restyle the box. Set --alpha-tooltip-bg in such a class to recolour the box and its arrow together; set --alpha-tooltip-border-color to outline the arrow to match a box border. Those classes MUST live in a global stylesheet — the tooltip is in , so component-scoped (.razor.css) rules can't reach it. ============================================================================ */ .alphaTooltip { display: inline-block; /* wrap the trigger tightly for getBoundingClientRect */ } .alpha-global-tooltip { position: fixed; /* viewport-relative — escapes overflow ancestors */ z-index: 999999; /* above app stacking contexts (modals, sticky) */ max-width: 300px; width: max-content; word-wrap: break-word; /* Box + arrow share one variable, so a theme class only needs to set --alpha-tooltip-bg to recolour both. The fallback is the default grey; using a fallback (not a declaration) lets a theme win regardless of stylesheet order. */ background-color: var(--alpha-tooltip-bg, #6a6a6a); color: white; text-align: center; border-radius: 6px; padding: 4px 8px; pointer-events: none; /* never intercept the mouse */ visibility: hidden; opacity: 0; transition: opacity 0.15s ease, visibility 0.15s ease; } .alpha-global-tooltip.is-visible { visibility: visible; opacity: 0.9; } /* Arrow pointing at the trigger. alphaTooltip.js sets data-arrow-side to the resolved side (after any flip) and --arrow-x / --arrow-y to the trigger's centre along that edge. */ .alpha-global-tooltip::before, .alpha-global-tooltip::after { content: ""; position: absolute; border: solid transparent; } .alpha-global-tooltip::after { /* fill triangle */ border-width: 5px; } .alpha-global-tooltip::before { /* 1px-larger border triangle, behind the fill */ border-width: 6px; } .alpha-global-tooltip[data-arrow-side="bottom"]::after { /* tooltip above trigger → points down */ top: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%); border-top-color: var(--alpha-tooltip-bg, #6a6a6a); } .alpha-global-tooltip[data-arrow-side="top"]::after { /* tooltip below trigger → points up */ bottom: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%); border-bottom-color: var(--alpha-tooltip-bg, #6a6a6a); } .alpha-global-tooltip[data-arrow-side="right"]::after { /* tooltip left of trigger → points right */ left: 100%; top: var(--arrow-y, 50%); transform: translateY(-50%); border-left-color: var(--alpha-tooltip-bg, #6a6a6a); } .alpha-global-tooltip[data-arrow-side="left"]::after { /* tooltip right of trigger → points left */ right: 100%; top: var(--arrow-y, 50%); transform: translateY(-50%); border-right-color: var(--alpha-tooltip-bg, #6a6a6a); } /* Border triangle (::before) mirrors each fill triangle (::after) one pixel larger and behind it, so a theme that sets --alpha-tooltip-border-color shows a matching outline around the arrow. The fill is nudged 1px back over the box edge to hide the seam where arrow meets box. With the border colour unset it falls back to the background, so the arrow stays solid and unbordered themes look unchanged. */ .alpha-global-tooltip[data-arrow-side="bottom"]::before { top: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%); border-top-color: var(--alpha-tooltip-border-color, var(--alpha-tooltip-bg, #6a6a6a)); } .alpha-global-tooltip[data-arrow-side="bottom"]::after { margin-top: -1px; } .alpha-global-tooltip[data-arrow-side="top"]::before { bottom: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%); border-bottom-color: var(--alpha-tooltip-border-color, var(--alpha-tooltip-bg, #6a6a6a)); } .alpha-global-tooltip[data-arrow-side="top"]::after { margin-bottom: -1px; } .alpha-global-tooltip[data-arrow-side="right"]::before { left: 100%; top: var(--arrow-y, 50%); transform: translateY(-50%); border-left-color: var(--alpha-tooltip-border-color, var(--alpha-tooltip-bg, #6a6a6a)); } .alpha-global-tooltip[data-arrow-side="right"]::after { margin-left: -1px; } .alpha-global-tooltip[data-arrow-side="left"]::before { right: 100%; top: var(--arrow-y, 50%); transform: translateY(-50%); border-right-color: var(--alpha-tooltip-border-color, var(--alpha-tooltip-bg, #6a6a6a)); } .alpha-global-tooltip[data-arrow-side="left"]::after { margin-right: -1px; }