slopped.siteCSS

Exhibit 05 of 17

Tooltips that know where they are

Hover or tab to an underlined word. Its tip is placed by CSS anchor positioning, against the word, and flips below if there is no room above.

The exhibit

Shut the door, or The cold that comes in under doors. Keep them shut. gets in. Don’t leave anything near the Has worked for both sides. “Clack.”. And whatever you do, don’t go looking for the stock in the Behind the wall. Everything’s on display; nothing’s in stock..

How it works

Each word names itself an anchor in its style attribute (anchor-name: --stapler), and its tip names the same anchor (position-anchor: --stapler). position-area: top puts the tip above the word and position-try-fallbacks: flip-block tries below when above would leave the screen. The tip is shown with a plain sibling selector on :hover and :focus-visible.

Without anchor positioning, the tip is absolutely positioned the old way, above the whole passage: still readable, but no longer pointing at its word.

The key CSS

Cut from this exhibit’s stylesheet as it is served.

/* hidden until its word is hovered or focused */
.x-tooltip .tip { display: none; }
.x-tooltip .term:is(:hover, :focus-visible) + .tip { display: block; }

/* anchor positioning: above the word, centred; flipped below if it would leave the screen */
@supports (anchor-name: --a) {
  .x-tooltip .tip {
    position: fixed;               /* escapes any box that clips it */
    position-area: top;            /* the anchor is named in the HTML: style="position-anchor: --stapler" */
    margin-bottom: 8px;
    position-try-fallbacks: flip-block;
  }
}
/* without it: the old way, above the whole passage rather than the word, and no flipping */
@supports not (anchor-name: --a) {
  .x-tooltip .passage { position: relative; }
  .x-tooltip .tip { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 2; max-width: 100%; }
}

Accessibility

The words are buttons, so they can be focused, and the tip is tied to each with aria-describedby, so a screen reader reads it whether or not it is visible. Missing: WCAG asks that a tip on hover can be dismissed without moving the pointer (usually Esc). CSS can’t listen for Esc, so this fails that. The tip also can’t be hovered itself. A script, or the newer popover="hint" with interest invokers, does better.

Browser support

  • anchor positioning Works in this browser.Not in this browser: The tip sits above the whole passage, positioned the old way, instead of beside its word. Checked 2026-10-14: Chromium 149 yes, Firefox 141 no.
  • :has() Works in this browser.Not in this browser: Not used for the tooltip itself; only for the dark mode exhibit’s colours if you switched them on. Checked 2026-10-14: Chromium 149 yes, Firefox 141 yes.
Slop at the top