Position a tooltip or popover relative to any element on the page using native CSS anchor positioning — no JavaScript, no positioning library. Pick a position-area from the 3x3 grid, adjust the gap, and copy the generated CSS.
Live Preview — Chrome 125+
The dark tooltip is positioned entirely with CSS anchor positioning — no JavaScript, no parent/child DOM relationship required between it and the green anchor box. In a browser without support yet, it falls back to a fixed corner position rather than breaking.
position-area
Position mode
Use fixed for viewport-level UI like a tooltip that must escape a scrolling/clipped ancestor — the classic case anchor positioning was built to solve without a portal.
Click any of the 9 grid cells to choose where the target sits relative to the anchor — top, bottom-right, center, and so on.
Drag the slider to set the margin between the anchor and the positioned element.
Use fixed when the positioned element needs to escape a scrolling or overflow: hidden ancestor — the classic tooltip-clipping problem.
Copy the anchor-name, position-anchor, and position-area declarations and drop them straight into your stylesheet.
