/* ── tooltip ── * The one tooltip every `data-tip` control shares. * Linked from index.html in cascade order — the order is load-bearing. */ /* Fixed and parented to on purpose. The obvious implementation is a ::after on the control itself, and it cannot work here: `#tabline .tabs` scrolls sideways and `#sidebar` hides its overflow, so a tip drawn inside either is clipped by its own container — which is most of the controls that have one. A fixed element escapes every ancestor, and can flip above/below when there is no room, which a ::after cannot do at all. Positioned by events-chrome.js; everything here is appearance. */ #tip { position: fixed; top: 0; left: 0; z-index: 200; /* over the palette (100) — it can be pointed at too */ pointer-events: none; /* never sits between the pointer and what it describes */ background: var(--bg-code); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; font-size: 10.5px; line-height: 1.5; letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.12s; } #tip.on { opacity: 1; }