Cookbook snippet · tier 2

CSS Anchor 定位的 Tooltip / Popover

用 CSS anchor-positioning 讓 popover 相對錨點元素定位,並提供 @supports 降級。

Live example

ld binding 順序 bug 只在「dlopen 多個 .so 再依序 dlclose」第一次 dlopen libsynow3 後 dlclose、然後 dlopen libsynosharing —— 第二次 dlopen 因 GOT 殘留 mapping 觸發 SIGSEGV。glibc < 2.34 已知議題。這條路徑會踩到。

完整食譜 (HTML + JS · 複製改寫用)

CSS anchor-positioning lets a popover position itself relative to an anchor element. Provides hover-detail without JS positioning math.

When to use

Hover detail on chart data points
Inline glossary entries (definition popover on a term)
"What's this number?" affordance next to a label

Complete snippet (paste-and-tweak)

<div class="vg-w-pop-EXAMPLE">
  <style>
    .vg-w-pop-EXAMPLE { position: relative; }
    .vg-w-pop-EXAMPLE .term { anchor-name: --vgw-anchor; text-decoration: underline dotted var(--muted); cursor: help; }
    .vg-w-pop-EXAMPLE .pop {
      position-anchor: --vgw-anchor;
      position: absolute;
      top: anchor(bottom);
      left: anchor(center);
      translate: -50% var(--s-1);
      padding: var(--s-1) var(--s-2);
      background: var(--bg-soft);
      border: 1px solid var(--line);
      font-family: var(--scribed);
      font-size: var(--fs-sm);
      max-width: 32ch;
      opacity: 0;
      transition: opacity 100ms;
      pointer-events: none;
    }
    .vg-w-pop-EXAMPLE .term:hover + .pop,
    .vg-w-pop-EXAMPLE .term:focus + .pop { opacity: 1; }
    /* Fallback without anchor positioning */
    @supports not (anchor-name: --x) {
      .vg-w-pop-EXAMPLE .pop { position: static; opacity: 1; pointer-events: auto; }
    }
  </style>
  <p>
    The system uses a <span class="term" tabindex="0">consistent hash ring</span>
    <span class="pop">A data structure where each key hashes to a fixed point on a circle, and the closest server clockwise owns the key. Adding a server only re-shuffles keys near its inserted position.</span>
    to route requests.
  </p>
</div>

Gotchas

Browser support (as of 2026): Chromium ships anchor positioning, Safari has partial support, Firefox is behind a flag. Always provide an @supports not fallback that degrades to inline.
Mobile: hover doesn't exist; expose via tap (:focus works if the term has tabindex="0").
pointer-events: none on the pop while hidden prevents blocking clicks on underlying content.
Don't over-tooltip — if a term needs explaining, often the prose should explain it inline rather than hiding the explanation.