CSS Anchor Positioning: Tooltip & Popover Guide

CSS anchor positioning lets you attach a tooltip or popover to another element on the page without JavaScript, using the new anchor-name and position-anchor properties. You define an anchor element, then position the tooltip relative to it with position: absolute and anchor-specific inset properties. This guide explains how it works, how to use it, and common pitfalls.

Background: Why Anchor Positioning Was Created

For years, placing a tooltip or popover next to a button, link, or image required JavaScript to measure the target’s position and then set the tooltip’s top and left values. That approach breaks when the page scrolls, the layout changes, or the target moves. CSS anchor positioning solves this by making the browser handle the relationship between the two elements natively. It was first proposed by the CSS Working Group and is now supported in Chromium-based browsers (Chrome, Edge, Opera) as of version 125, with Firefox and Safari working on implementation. The feature is part of the CSS Positioned Layout Module Level 4 specification.

How It Works: Core Properties and Syntax

To use anchor positioning, you need two elements: the anchor (the thing you attach to) and the target (the tooltip or popover). You give the anchor an anchor-name (like a CSS variable), then tell the target which anchor to use with position-anchor. Then you position the target using the inset-area property or the more granular top, left, right, bottom properties that accept anchor functions.

Here is a minimal example:

.anchor {
  anchor-name: --my-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: top center;
}

The inset-area property is the easiest way to place the tooltip. It takes two keywords: one for the block direction (top, bottom, center) and one for the inline direction (left, right, center). For example, top center places the tooltip above the anchor, horizontally centered. You can also use the anchor() function in the top, right, bottom, and left properties to set exact offsets from the anchor’s edges:

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%);
}

This places the tooltip’s bottom edge at the anchor’s top edge, and centers it horizontally. The anchor() function can also take a second argument as a fallback value, e.g., anchor(right, 20px).

How to Choose the Right Positioning Method

You have three main ways to position a tooltip or popover with anchor positioning:

Inset-area – best for simple placements like “above”, “below”, “left”, “right”. It handles centering automatically and is very readable.
Anchor() functions – best for precise control, such as aligning the tooltip’s edge exactly with the anchor’s edge or offsetting by a few pixels.
Position-try – best for avoiding viewport clipping. It lets you define fallback positions if the tooltip would overflow the screen.

For most tooltips, start with inset-area. If you need to nudge the position, add a margin or use anchor() with offsets. For popovers that might open near the edge of the screen, use position-try-fallbacks to specify alternate placements.

Common Problems and How to Solve Them

Here are the most frequent issues developers run into:

Tooltip not showing: Make sure the target has position: absolute (or fixed) and that the anchor has an anchor-name. Also check that the anchor is not inside a display: contents element, which breaks the relationship.
Tooltip appears in the wrong place: Verify the inset-area keywords are correct. Remember that top means the tooltip is placed above the anchor, not that the tooltip’s top aligns with the anchor’s top.
Tooltip gets clipped by overflow: If an ancestor has overflow: hidden, the tooltip may be cut off. Use position-try-fallbacks to flip the tooltip to the opposite side, or move the tooltip outside that ancestor in the DOM.
Anchor name not recognized: The anchor-name must be a valid CSS custom property (like --my-anchor). It cannot be a plain string.

Comparison: Anchor Positioning vs. JavaScript vs. Popover API

The Popover API (the popover attribute) is a separate, complementary feature that gives you a top-layer element with built-in show/hide behavior. You can combine it with anchor positioning: use popover for the behavior and position-anchor for placement. This is the recommended modern approach for popovers.

Compared to JavaScript libraries like Popper.js, anchor positioning is lighter and faster because it’s native. However, it lacks some advanced features like collision detection with multiple fallbacks (though position-try is catching up) and does not work in older browsers without a polyfill. For simple tooltips, anchor positioning is ideal; for complex popovers that must adapt to many screen sizes, you might still want a library until browser support improves.

Browser Support and Progressive Enhancement

As of 2025, anchor positioning is supported in Chrome, Edge, and Opera (version 125+), but not in Firefox or Safari. This means you should use it as a progressive enhancement: provide a fallback for browsers that don’t support it. For example, you can use JavaScript to set a fallback position if position-anchor is not supported, or simply let the tooltip appear in its normal document flow position. You can detect support with @supports (anchor-name: --foo) and provide a default style.

Frequently Asked Questions

Can I use anchor positioning with the popover attribute?

Yes, they work together. The popover attribute makes the element show in the top layer and gives you showPopover() and hidePopover() methods. You can then use position-anchor on the popover to place it relative to an anchor. This is the recommended way to create accessible popovers without JavaScript.

How do I make the tooltip flip to the other side if it goes off-screen?

Use the position-try-fallbacks property. For example, position-try-fallbacks: flip-block will try the opposite block position if the tooltip overflows. You can also specify a list of inset-area values to try in order.

Does anchor positioning work in iframes?

Yes, but the anchor and the target must be in the same document. An anchor inside an iframe cannot be referenced by a target in the parent document. This is a security restriction.

Can I anchor a tooltip to a specific point inside an element?

Yes, you can use the anchor() function with the inside keyword, like left: anchor(--my-anchor inside 20px). This positions the tooltip relative to a point 20px from the left inside the anchor. However, this is less common than using inset-area.

Is there a polyfill for anchor positioning?

Yes, there is a JavaScript polyfill called “CSS Anchor Positioning” that you can include to make it work in non-supporting browsers. It works by measuring positions and applying inline styles, but it may not cover every feature. Check the official polyfill repository for the latest details.

Summary: When to Use CSS Anchor Positioning

Use CSS anchor positioning when you need a simple tooltip or popover that stays attached to a specific element, especially when you want to avoid JavaScript. It’s perfect for UI elements like info icons, help buttons, and dropdown menus. For complex scenarios with lots of dynamic content or extreme viewport constraints, consider a JavaScript library or a hybrid approach. Always test in multiple browsers and provide a fallback for Safari and Firefox users.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →