CSS Anchor Positioning Lets Developers Build Tooltips Without JavaScript Hacks

CSS Anchor Positioning is a modern CSS feature that allows developers to position one element relative to another entirely in CSS, eliminating the need for JavaScript coordinate calculations. Traditionally, building tooltips required manual use of getBoundingClientRect(), resize event listeners, and sometimes third-party positioning libraries. With the new approach, a button can be assigned an anchor name and a tooltip can reference it directly using properties like top: anchor(bottom), telling the browser to place the tooltip just below the button. The feature also supports position fallbacks, so if a tooltip would overflow the viewport, the browser can automatically try alternative placements. While CSS handles positioning, JavaScript remains responsible for behavioral logic such as opening and closing tooltips, and developers must still address accessibility requirements like keyboard navigation and proper semantics.