CSS Anchor Position Generator
Position tooltips and popovers with pure CSS. Pick a side, set the gap, copy the code.
The preview uses the real anchor positioning API in your browser, not a simulation. If your browser lacks it, the tooltip parks in the corner and the note above says why.
Your CSS
Tooltips without the JavaScript measuring act
For twenty years, putting a tooltip exactly above a button meant JavaScript: measure the button, measure the tooltip, compute coordinates, then listen to scroll and resize to keep them glued together. Libraries like Popper and Floating UI exist largely to do this one job well. CSS anchor positioning moves the whole trick into the browser engine. The anchor declares a name, the floating element declares which anchor it follows and which side it sits on, and the browser keeps them attached through scrolls, resizes and zooms with no script at all.
This generator covers the everyday 90 percent: side choice including logical directions (block-start, inline-end) that respect writing direction, and a gap. The specification also offers position-try fallbacks for edge collisions and anchor() math for fine offsets, which are natural next steps once this basic pattern, the one generated above, is in your stylesheet.
How to use this generator
- Choose a position area: physical sides, or logical sides that follow your layout's writing direction.
- Drag the gap slider and watch the tooltip move in the live preview.
- Edit the tooltip text to match your real use case.
- Copy the CSS and adapt the class names. Keep a fallback (a plain absolute position) for browsers without support.
Frequently Asked Questions
What is CSS anchor positioning?
CSS anchor positioning lets one element position itself relative to another element, the anchor, using pure CSS. You name the anchor with anchor-name, attach the floating element with position-anchor, and place it with position-area (top, bottom, left, right and spans). It replaces the JavaScript measuring and scroll-listening that tooltips and popovers used to need.
Which browsers support anchor positioning?
Chromium browsers (Chrome and Edge) ship anchor positioning, and Safari added it in version 26. Firefox support is in development. Because support is fresh, this generator checks your browser live and tells you if the preview cannot run, and production code should keep a sensible fallback position for older browsers.
What is the difference between position-area and inset-area?
They are the same property at different ages. The feature shipped first as inset-area, then the CSS Working Group renamed it to position-area as the specification settled. This generator emits position-area, the current standard name supported by shipping browsers.
Can anchor positioning flip a tooltip that hits the screen edge?
Yes, with position-try fallbacks: you can declare alternate positions (for example, try bottom when top overflows) and the browser picks the first that fits. That is beyond this basic generator, but the CSS it produces is the foundation the fallbacks build on.
Does the generator upload my code or designs?
No. The preview and code generation run entirely in your browser with the native anchor positioning API.
Check Out Other Popular Tools
Raosoft Sample Size Calculator — Margin of Error & Confidence Calculator
Calculate survey sample size using the official Raosoft formula. Compute margin of error, confidence levels, and recommended sample size for research.
Gamertag Generator
Generate Xbox-style, random, funny, and competitive gamertags instantly with local browser-based naming patterns.
Percentage Calculator (מחשבון אחוזים)
Calculate percentages of numbers, percentage change, reverse percentages, discounts, tips, VAT & sales tax, and fraction conversions instantly with step-by-step formulas.
Was this tool helpful?
Comments
Loading comments...