CSS Anchor Positioning replaces JavaScript tooltips with zero runtime cost

The days of writing JavaScript loops to track scroll events and layout shifts just to keep tooltips aligned with their triggers may soon be over. Modern browsers have adopted CSS Anchor Positioning, a native capability that lets the layout engine handle positioning without any JavaScript intervention. A new open-source library called css-anchor-kit bridges the ergonomic gap between this powerful but verbose CSS feature and the intuitive API developers have grown accustomed to from floating-ui.

From JavaScript loops to CSS-native precision

Previously, positioning floating elements like tooltips or popovers required continuous measurement and recalculation. Developers had to track scroll events, resize operations, and layout shifts using libraries like floating-ui, which relied on autoUpdate loops to keep elements aligned. These loops measured anchor positions, computed offsets, and wrote new styles on every interaction — a process that consumed CPU cycles and introduced potential jank.

CSS Anchor Positioning changes the equation entirely. With support now stable in Chrome/Edge 125+, Safari 26+, and Firefox via flag, the browser’s layout engine assumes responsibility for positioning. Elements can be anchored to others using simple CSS properties like anchor-name, position-anchor, and anchor(), with positioning updates handled automatically during layout passes. The result? No JavaScript runtime overhead, no reflow delays, and smoother scrolling experiences.

A familiar API for native positioning

While the underlying CSS is powerful, it’s also verbose and unfamiliar. Mapping concepts like top: anchor(bottom) or position-try-fallbacks: flip-block to common positioning needs feels cumbersome. Developers have spent years internalizing floating-ui’s concise vocabulary — placement, offset, flip, and arrow — but translating those into native CSS requires mental effort.

css-anchor-kit solves this by providing a thin abstraction layer that mirrors floating-ui’s API while compiling down to native CSS. The library exposes a useAnchor hook that accepts familiar parameters:

const { anchorProps, floatingProps, arrowProps, supported } = useAnchor({
  placement: 'bottom', // One of 12 standard floating-ui placements
  offset: 8,           // Pixel gap between anchor and floating element
  flip: true,          // Automatically flip to opposite side on overflow
  hide: false,         // Hide when anchor scrolls out of view
  size: false          // Match anchor width or height
})

Under the hood, useAnchor generates inline styles that compile to native CSS properties. When the page scrolls or the anchor moves, the browser repositions the floating element without any JavaScript execution — just like it handles position: sticky elements.

Framework flexibility and zero dependencies

The library isn’t locked to React. While it offers React-specific hooks and components, the core functionality is framework-agnostic. Developers can use buildAnchorStyles from the core package to generate positioning styles for vanilla JavaScript environments:

import { buildAnchorStyles } from 'css-anchor-kit/core'

const { anchor, floating } = buildAnchorStyles('--my-tooltip', {
  placement: 'top',
  offset: 8
})

Object.assign(anchorEl.style, anchor)
Object.assign(floatingEl.style, floating)

For React users, the library provides component-based alternatives that mirror the headless hook approach:

import { Anchored, Anchor, Floating, Arrow } from 'css-anchor-kit'

<Anchored placement="top" offset={8}>
  <Anchor as="button">Hover me</Anchor>
  <Floating role="tooltip">Type less. Think more.</Floating>
  <Arrow className="arrow" />
</Anchored>

This separation of concerns keeps the library lightweight — the React wrapper adds less than 1KB to the bundle when tree-shaken appropriately.

Migration paths for existing codebases

Teams with existing floating-ui implementations don’t need to rewrite everything manually. The library includes a jscodeshift codemod that automates most of the mechanical changes:

npx css-anchor-kit migrate "src/**/*.{ts,tsx}"

This tool rewrites imports, replaces middleware calls with native CSS equivalents, and adapts the positioning logic to leverage the browser’s layout engine. Developers can first run it in dry-run mode to preview changes before applying them in place.

What’s next for CSS-powered UI components

The arrival of CSS Anchor Positioning represents a fundamental shift in how interactive UI components are built. By moving positioning logic from JavaScript to CSS, developers can reduce bundle sizes, eliminate runtime costs, and improve performance — especially on resource-constrained devices or pages with many floating elements.

As browser support continues to expand and developers adopt these native capabilities, we may see a new generation of lightweight UI libraries that prioritize simplicity over complexity. The future of tooltip positioning isn’t in JavaScript loops — it’s in the browser’s layout engine doing the heavy lifting, while developers focus on crafting intuitive interfaces rather than managing positioning math.