CSS anchor positioning
A new CSS feature (Chrome 2024) for positioning an element relative to another "anchor" element — e.g. a tooltip or dropdown that attaches to its button and automatically moves if it doesn't fit. It solves in pure CSS what long required JS libraries.
Problem: placing a popover/tooltip/dropdown next to an element and keeping it visible (flipping to the other side when it reaches the screen edge) required libraries like Popper.js/Floating UI, which measure and position in JavaScript every time. Anchor positioning does it declaratively: mark an element as an anchor (anchor-name), position another relative to it (position-anchor, anchor()), and specify fallback positions (position-try) the browser automatically switches to when it doesn't fit. Use case: tooltips, menus, popovers, comment bubbles — everything "attach to X and be smart about space". Combined naturally with the Popover API and <dialog>. Early stage (Chrome first, others on the way 2024-2025) but a big improvement. Related to dialog-element and popover.