/* ═══════════════════════════════════════════════════════════════════════ ABEBIT — global rich tooltip. Any element carrying data-tip="…" gets the dark bubble with the gold edge used across the product. A single bubble is portalled to and moved into place, so it can never be clipped by a card's overflow:hidden or sit behind a stacking context — the failure mode the per-card tooltips had. Usage: Label The .tip class only adds the dotted underline + help cursor; the bubble itself is driven purely by the data-tip attribute. ═══════════════════════════════════════════════════════════════════════ */ /* the affordance on the trigger */ .tip{ position:relative;cursor:help; text-decoration:underline dotted rgba(169,177,189,.45); text-underline-offset:2px; } .tip-plain{text-decoration:none} /* the single floating bubble */ #abebit-tip{ position:fixed;z-index:9000;max-width:300px; padding:10px 12px;border-radius:11px; background:#0B0D12;color:#F2F4F7; border:1px solid rgba(240,185,11,.42); box-shadow:0 14px 38px rgba(0,0,0,.62); font-family:var(--font-body,'Sora',system-ui,sans-serif); font-size:11.5px;font-weight:400;line-height:1.55;text-align:left; white-space:normal;overflow-wrap:anywhere; opacity:0;visibility:hidden;transform:translateY(4px); transition:opacity .16s ease,transform .16s ease,visibility .16s ease; pointer-events:none; } #abebit-tip.on{opacity:1;visibility:visible;transform:translateY(0)} /* little arrow, flipped when the bubble is placed above the trigger */ #abebit-tip::after{ content:'';position:absolute;left:var(--tip-arrow,50%);width:9px;height:9px; background:#0B0D12;border-left:1px solid rgba(240,185,11,.42); border-top:1px solid rgba(240,185,11,.42); transform:translateX(-50%) rotate(45deg); } #abebit-tip[data-place="below"]::after{top:-5px} #abebit-tip[data-place="above"]::after{ bottom:-5px;border-left:none;border-top:none; border-right:1px solid rgba(240,185,11,.42); border-bottom:1px solid rgba(240,185,11,.42); } /* touch: a tapped trigger stays highlighted while its bubble is open */ .tip.tip-open{color:var(--tip-open-color,#F0B90B)} @media(prefers-reduced-motion:reduce){ #abebit-tip{transition:opacity .01s} }