Anchored Fallback-Aware Tooltip

A tooltip that flips from below its trigger to above when it would overflow — and its arrow flips with it, both in pure CSS, no ResizeObserver/Floating-UI JS. `position-try-fallbacks:flip-block` (already Baseline — MDN's own compat table, fetched fresh this run, shows Full support at Chrome/Edge 128, Firefox 147, Safari 26, Opera 114) has handled the repositioning itself since this catalog's `anchor-popover-menu` entry. The genuinely new layer here is `container-type:anchored` + `@container anchored(fallback: flip-block){...}` — **CSS Anchored Fallback Container Queries**, which for the first time lets a stylesheet detect WHICH fallback position the browser actually chose and restyle a descendant (the arrow) to match, with zero JS. **Real, current, primary-sourced:** Chrome for Developers' own blog post 'Detect fallback positions with anchored container queries from Chrome 143' (developer.chrome.com/blog/anchored-container-queries, published 2025-10-29, byline Una Kravets, a Chrome standards/DevRel engineer) — fetched fresh this run via Firecrawl (this sandbox's standing `ENOTFOUND` egress block hit `developer.mozilla.org` directly again, identically to every prior day). A second independent primary source, chromestatus.com's own feature-tracker page (feature 5177580990496768), confirms the exact shipping milestone and — just as importantly — the real cross-engine gap: Chrome/Edge/Android/WebView 143 'Shipping', while both Firefox's and WebKit's own standards-positions trackers read **'No signal'** (no committed position either way, as of this run) — this is Chromium-only today, not rounded up to Baseline or 'coming soon everywhere.' The underlying web-features tracking issue (#3403) was closed without the feature being adopted as a tracked Baseline entry, so there is no Baseline timeline to cite here at all — stated as genuinely open-ended, not estimated. **Honest fallback, not glossed over:** without `container-type:anchored` support, the `@container anchored(...)` block simply never matches, so the arrow keeps pointing its default direction even on the (correctly, separately) flipped tooltip — a cosmetic imperfection, never a broken layout, exactly as the Chrome blog's own demo caveats it. Pure CSS, no WebGL, no scroll-jacking — fits the DIY $999 tier as cleanly as `anchor-popover-menu` does. (Vanilla example: live iframe preview + HTML/CSS tabs — scroll the demo box and hover the button near the bottom edge to watch both the position and the arrow flip.)

<div class="aft-page">
  <p class="aft-hint">Scroll down ↓</p>
  <button class="aft-btn" popovertarget="aft-tip">Click me near the bottom edge ▾</button>
</div>
<div id="aft-tip" class="aft-tip" popover="hint">
  <span class="aft-arrow" aria-hidden="true"></span>
  I flip above when I'd overflow below — and my arrow flips with me.
</div>