CSS Anchor Positioning: The End of JavaScript Tooltip Math

CSS developers, rejoice! Positioning tooltips, popovers, and dropdowns relative to trigger elements just got dramatically simpler with the CSS Anchor Positioning API. No more JavaScript math to calculate offsets, no more libraries to handle edge detection: the browser now handles it natively.

Goodbye, Complex Positioning Calculations:

For years, developers have wrestled with position: absolute, getBoundingClientRect(), and libraries like Popper.js to position floating elements correctly. These solutions required JavaScript to measure elements, compute positions, and handle viewport collisions. The CSS Anchor Positioning API provides a declarative, CSS-only alternative.

You might use Benefits of CSS Anchor Positioning if...

Declarative Syntax: Define anchor relationships entirely in CSS, no JavaScript measurement required

Built-in Fallbacks: The `position-fallback` property handles viewport collisions automatically

Performance: Browser-native positioning avoids layout thrashing from JavaScript calculations

Composable: Works seamlessly with the Popover API and other modern CSS features

Getting Started with CSS Anchor Positioning:

To take advantage of the Anchor Positioning API, you need to ensure your target browsers support it. Currently, the API is supported in Chromium-based browsers, with other engines working on implementation.

Here's a simple example demonstrating how to use the API:

/* Define the anchor element */
.anchor-button {
  anchor-name: --my-anchor;
}

/* Position the tooltip relative to the anchor */
.tooltip {
  position: absolute;
  /* Anchor the tooltip to the button */
  position-anchor: --my-anchor;
  /* Place it below the anchor */
  top: anchor(bottom);
  left: anchor(center);
  /* Center the tooltip horizontally on the anchor */
  justify-self: anchor-center;
}

This CSS defines an anchor on the button and positions the tooltip relative to it. The anchor() function resolves to the position of the named anchor's edges, eliminating the need for manual offset calculations.

Link to section: Handling Viewport Collisions with FallbacksHandling Viewport Collisions with Fallbacks

When the tooltip would overflow the viewport, you can define fallback positions:

.tooltip {
  position-anchor: --my-anchor;
  position-fallback: --tooltip-fallbacks;
}

@position-fallback --tooltip-fallbacks {
  /* First try: below the anchor */
  @try {
    top: anchor(bottom);
    left: anchor(center);
    justify-self: anchor-center;
  }
  /* Second try: above the anchor */
  @try {
    bottom: anchor(top);
    left: anchor(center);
    justify-self: anchor-center;
  }
  /* Third try: to the right */
  @try {
    left: anchor(right);
    top: anchor(center);
    align-self: anchor-center;
  }
}

The browser tries each @try block in order, using the first one that fits within the viewport.

Embrace a New Era of Element Positioning:

The CSS Anchor Positioning API marks a significant advancement for frontend developers, eliminating one of the most tedious problems in web development. With its declarative syntax and built-in collision handling, this API is set to revolutionize how we build tooltips, popovers, and dropdowns.

MDN Web Docs: CSS Anchor Positioning

Start exploring the potential of CSS Anchor Positioning and simplify your floating element positioning today!