Tools
Anchor Positioning Playground
Tooltips, menus and popovers tethered to their trigger in CSS, with no positioning library. Pick where it sits, then drag the button to the edge and watch it flip out of the way.
Limited availability
Your browser does not support anchor positioning yet, so the tooltip stays where the fallback put it. That is what your visitors on the same browser would see, which is the reason the output is written fallback first.
position-area) Three properties do the work
anchor-name on the trigger gives it a name. position-anchor on the floating element
points at that name. position-area says which cell of a three-by-three grid around the anchor
it should occupy. That is a complete tooltip. The floating element has to be absolutely or fixed positioned,
and the two do not need to be parent and child, which is what makes it useful for menus that must escape an
overflow: hidden ancestor.
The part a library used to do
position-try-fallbacks lists what to try when the first position would overflow. The browser
tests them in order and takes the first that fits, on every scroll and resize, with no script. Drag the button
into a corner above to watch it.
Ship it fallback first
Read the badge at the top of this page before you depend on it. The output positions the tooltip with plain
absolute positioning inside a relative wrapper, which every browser understands, and then upgrades it inside
@supports (anchor-name: --a). Pair it with the popover attribute for
dismissal and focus, and see the feature page for who already ships it.