CSS Tooltip Without JavaScript: Anchor Positioning
Build a CSS tooltip without JavaScript: name the trigger with `anchor-name`, tether the tooltip with `position-anchor`, show it with the Popover API, and add `position-try-fallbacks` so it flips instead of clipping.
Yes — you can build a CSS tooltip without JavaScript. Name the trigger with anchor-name , tether the tooltip to it with position-anchor and the anchor() function, toggle visibility with the Popover API's popovertarget , and add position-try-fallbacks: flip-block so the tooltip flips instead of clipping at viewport edges. It works in Chrome/Edge 125+, Safari 26+, and Firefox 147+ — Baseline 2026. Minimal working example One complete, runnable snippet. Save it as tooltip.html and open it in a 2026 browser — no build step, no script tag: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>CSS tooltip, zero JavaScript</title> <style> /* 1. Name the trigger. Any element can be an anchor. */ .trigger { anchor-name: --tip-anchor; padding: 10px 20px; font: inherit; } /* 2. Tether the tooltip to the anchor. */ .tooltip { position-anchor: --tip-anchor; position: fixed; /* top-layer popover: never clipped by overflow */ top: anchor(bottom); /* my top edge sits at the anchor's bottom edge */ left: anchor(center); /* centered on the anchor's horizontal midpoint */ translate: -50% 8px; /* center, then clear the trigger by 8px */ /* 3. Flip automatically when there's no room below. */ position-try-fallbacks: flip-block; background: #16161d; color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 14px; white-space: nowrap; margin: 0; border: none; } </style> </head> <body style="min-height: 100vh; display: grid; place-items: center;"> <button class="trigger" popovertarget="tip">Hover or click me</button> <div id="tip" class="tooltip" popover="hint">Anchored natively — no JavaScript.</div> </body> </html> How the four moving parts fit together: anchor-name: --tip-anchor…