CSS Anchor Positioning — position a tooltip with zero JS

<div class="wrap">
    <h1>🎮 Anchor Positioning: a tooltip with zero JS</h1>
    <p class="sub">
      Pick where the tooltip sits with <code>position-area</code>, then <strong>drag the anchor</strong> around the stage.
      The tooltip tracks it automatically — no <code>computePosition()</code>, no <code>ResizeObserver</code>, no scroll
      listener. Turn on <strong>smart fallbacks</strong> and drag toward an edge: <code>position-try-fallbacks</code>
      flips the tooltip to keep it on-screen.
    </p>

<div class="banner" id="banner">
      Heads up: this browser doesn't support CSS Anchor Positioning (<code>anchor-name</code>), so the tooltip
      won't reposition here. It's <strong>Baseline 2026</strong> — try the latest Chrome, Safari, or Firefox to see it live.
    </div>

<div class="panel">
      <h2>1 · Controls</h2>
      <div class="controls">
        <div class="ctl">
          <span>position-area</span>
          <div class="grid3" id="picker">
            <button data-area="top left"      aria-label="top left">↖</button>
            <button data-area="top center"    aria-label="top center" aria-pressed="true">↑</button>
            <button data-area="top right"     aria-label="top right">↗</button>
            <button data-area="center left"   aria-label="center left">←</button>
            <button class="center" tabindex="-1" aria-hidden="true">•</button>
            <button data-area="center right"  aria-label="center right">→</button>
            <button data-area="bottom left"   aria-label="bottom left">↙</button>
            <button data-area="bottom center" aria-label="bottom center">↓</button>
            <button data-area="bottom right"  aria-label="bottom right">↘</button>
          </div>
        </div>
        <div class="ctl">
          <span>Overflow handling</span>
          <label class="toggle">
            <input type="checkbox" id="smart" />
            <span class="switch"></span>
            <span>Smart fallbacks (<code style="font-family:ui-monospace">position-try-fallbacks</code>)</span>
          </label>
          <p class="hint" style="margin-top:12px; max-width:280px;">Drag the anchor to the edge the tooltip points at. With fallbacks <span class="flip">on</span>, it flips instead of clipping.</p>
        </div>
      </div>
    </div>

<div class="panel">
      <h2>2 · Drag the anchor</h2>
      <div class="stage" id="stage">
        <button class="anchor" id="anchor">Drag me ⠿</button>
        <div class="tooltip" id="tooltip" role="status">
          <b>Positioned by CSS.</b> I'm glued to the anchor — move it and I follow, no JavaScript doing the math.
        </div>
      </div>
      <p class="hint" id="hint"></p>
    </div>

<div class="panel">
      <h2>3 · The CSS doing the work</h2>
      <div class="code" id="code"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.