CSS position-try-fallbacks: Flip Popovers That Overflow
Tooltips that flip instead of overflowing
Keeping a tooltip on screen used to take scroll and resize listeners plus your own overflow math, or a library's flip logic. With position-try-fallbacks the browser tries the other side for you whenever the first spot doesn't fit.
.tooltip { position: fixed; top: var(--top); left: var(--left);}// JS: on scroll + resize, measure trigger and tooltip with getBoundingClientRect(), compare against window.innerHeight, flip above when it overflows, write --top and --left.trigger { anchor-name: --trigger;}.tooltip { position: absolute; position-anchor: --trigger; position-area: bottom; position-try-fallbacks: flip-block, flip-inline;}/* no room below? the browser moves it on top */anchor positioning Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
Everything on this page works in Chrome and Edge 129, Firefox 147 and Safari 26. Baseline still lists anchor positioning as limited because only Safari supports every position-visibility value, which this snippet doesn't use.
No listeners to manage
The browser re-checks the fit while the page scrolls or resizes, so there's no scroll or resize handler to add, throttle or clean up.
Fallbacks in order
You list as many backup positions as you want. The browser walks the list and uses the first one that fits.
Less to ship
Flip logic is a big reason projects pull in Floating UI or Popper. For tooltips and menus, position-try-fallbacks covers it in CSS.
How it works
position-try-fallbacks gives an anchored element a list of backup positions. It works on absolutely or fixed positioned elements that are tied to an anchor with position-anchor. The browser first tries the spot you set with position-area or anchor(), and if the element would overflow, it goes down your list until something fits.
flip-block mirrors the position top to bottom, so a tooltip set to position-area: bottom moves above its trigger. flip-inline mirrors it left to right, and writing flip-block flip-inline as one entry flips both ways at once. When a mirror isn't enough, you can name your own @position-try rule and list that instead.
The fit is checked against the tooltip's containing block. For a fixed tooltip or a popover in the top layer, that's the viewport. For an absolutely positioned tooltip inside a positioned parent, it's that parent, so a tooltip can flip even when there's plenty of room on screen. See the position-try-fallbacks reference for every value.
Browsers without anchor positioning skip all of these properties. Keep a plain top and left position inside @supports not (anchor-name: --a) so older browsers still show the tooltip somewhere sensible.