/* The little "i" and what it says. Two elements per tip and they do different jobs: .tip__icon the marker you hover or focus. A button, because it does something on click, and buttons are reachable by keyboard without any help from us. .tip__text the words. Hidden from view, never from assistive software — `aria-describedby` reads a referenced element even when it carries the `hidden` attribute, so a screen reader gets the description without anybody hovering anything. What you SEE is a third element: one shared panel, appended to by tooltips.js, into which the hidden text is copied. One panel rather than one per tip because a page here can carry sixty of them, and because only one is ever meant to be open. The panel lives in the top layer via the popover attribute, which is the only way to be certain nothing covers it. Every previous approach to this problem is a z-index guess that holds until somebody adds a new stacking context. */ /* --- the marker ----------------------------------------------------------- */ .tip { /* inline-flex so it sits on the text baseline beside a label rather than adding a line box of its own. */ display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.3em; } .tip__icon { display: inline-flex; align-items: center; justify-content: center; /* Sized in em so it tracks whatever it sits beside — a heading gets a bigger one than a table cell without a single override. */ width: 1.15em; height: 1.15em; padding: 0; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper); color: var(--ink-soft); font: inherit; font-size: max(0.75em, 11px); font-style: italic; font-weight: 600; line-height: 1; font-family: Georgia, "Times New Roman", serif; cursor: help; -webkit-appearance: none; appearance: none; /* QC instrumentation, not part of the shop. Invisible — and, for free, un-hoverable, un-clickable, and out of the tab order — until tooltips.js marks Option as held. The icon's own gap in the layout stays reserved either way, so nothing reflows as the key goes down and up. */ visibility: hidden; } :root[data-tips-visible] .tip__icon { visibility: visible; } .tip__icon:hover, .tip__icon[aria-expanded="true"] { border-color: var(--ink-soft); background: var(--surface); color: var(--ink); } .tip__icon:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* A marker beside a block element. `.tip` is inline, so it sits happily inside a heading or a label. Beside a

, a caption or a whole

, it would drop to its own line. This puts the pair on one line without either of them having to change element.

Money

Baseline alignment rather than centre, so the marker sits with the text rather than with the box the text is in. */ .tip-row { display: flex; align-items: baseline; gap: 0.15rem; flex-wrap: wrap; } .tip-row > .tip { margin-left: 0; } /* The gap does the spacing; the element's own margin would double it. */ .tip-row > :first-child { margin-bottom: 0; } /* Kept in the accessibility tree, kept out of the picture. `display:none` would be simpler and would also stop some screen readers announcing it. */ .tip__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- the panel ------------------------------------------------------------ */ .tip-panel { /* Placed by script, in viewport coordinates. The popover UA styles centre it with `inset:0; margin:auto`, which has to go before top/left mean anything. */ position: fixed; inset: auto; margin: 0; display: none; /* Never wider than the narrowest phone in common use, never taller than half a short laptop. Between them, a panel that always fits on the screen it is drawn on — which is the whole reason for the max-height and the scroll. */ width: max-content; max-width: min(23rem, calc(100vw - 1.5rem)); max-height: min(50vh, 22rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3) var(--space-4); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 0.8125rem; line-height: 1.5; text-align: left; white-space: normal; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.14); /* The fallback path for browsers without the popover attribute, where this is an ordinary fixed element and the number has to win on its own. Above the activity panel at 902, below nothing. */ z-index: 2147483000; } .tip-panel[data-open] { display: block; } /* Blocks made out of spans. The description is built from , never

, because a marker often sits inside a paragraph and a

inside a

is closed by the parser — which pushes the words out into the page as visible body text. */ .tip-panel__what, .tip-panel__then { display: block; margin: 0; } /* The second note: what else moves when you touch this. Visually separated because it answers a different question. The first paragraph is "what does this do"; this one is "what does it knock over". */ .tip-panel__then { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--rule); color: var(--ink-soft); } .tip-panel__then::before { content: "Knock-on effect"; display: block; margin-bottom: 0.15rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } /* Ink and paper only. A help marker on a printed packing slip is noise. */ @media print { .tip, .tip-panel { display: none !important; } }