CSS Anchor Positioning: Build Tooltips and Popovers Without JavaScript

Tweet
Share
Share
Pin

Positioning elements on a webpage sounds simple.

Then you try to build a tooltip.

Or a dropdown.

Or a popover that needs to stay connected to a button while the page changes size.

Suddenly, positioning becomes much more complicated.

For years, developers have relied on JavaScript libraries to solve these problems. However, modern CSS is becoming much more powerful.

One of the most interesting additions is CSS Anchor Positioning.

This feature allows one element to position itself relative to another element using CSS.

That means developers can build interfaces such as tooltips, menus, labels, and popovers with less JavaScript.

In this guide, we’ll explain what CSS Anchor Positioning is, how it works, practical examples, browser considerations, and when developers should use it.

What Is CSS Anchor Positioning?

CSS Anchor Positioning is a CSS feature that allows an element to position itself relative to another element.

The reference element is called the anchor.

The positioned element can then use that anchor to determine where it should appear.

For example, imagine a button:

<button class="profile-button">
  Profile
</button>

When a user interacts with the button, you may want to display a menu directly below it.

Traditionally, you might use JavaScript to calculate:

  • The button position
  • The button width
  • Available viewport space
  • Scroll position
  • Menu coordinates

CSS Anchor Positioning gives the browser more responsibility for these calculations.

Why CSS Anchor Positioning Matters

Modern interfaces contain many floating elements.

Examples include:

  • Tooltips
  • Dropdown menus
  • Popovers
  • Context menus
  • Labels
  • Notifications
  • Floating controls

These components usually need to stay connected to another element.

The challenge becomes greater when the layout changes.

For example, the user may:

  • Resize the browser
  • Scroll the page
  • Rotate a mobile device
  • Change text size
  • Open another component

JavaScript positioning libraries can solve these problems.

However, they add more code and complexity.

CSS Anchor Positioning moves more of this work into the browser.

How CSS Anchor Positioning Works

The basic idea involves two elements.

First, you define an anchor.

Then, you tell another element to use that anchor for positioning.

A simplified example looks like this:

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

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;

  top: anchor(bottom);
  left: anchor(left);
}

The .trigger element becomes the anchor.

The .tooltip element then positions itself relative to that anchor.

In this example, the tooltip appears below the trigger.

Understanding anchor-name

The first important property is:

anchor-name

It gives an element an anchor name.

For example:

.button {
  anchor-name: --menu-button;
}

The custom anchor name begins with two hyphens.

Now another element can reference --menu-button.

This creates a relationship between the two elements.

Understanding position-anchor

Next, the positioned element needs to know which anchor it should use.

That is where position-anchor comes in.

For example:

.menu {
  position: absolute;
  position-anchor: --menu-button;
}

Now the .menu element uses .button as its anchor.

However, we still need to tell the browser where the menu should appear.

Using the anchor() Function

The anchor() function allows developers to reference the position of an anchor.

For example:

.menu {
  top: anchor(bottom);
  left: anchor(left);
}

This tells the browser:

Place the top of the menu at the bottom of the anchor.

Then align the left side of the menu with the left side of the anchor.

The result is a menu positioned directly below the button.

A Simple CSS Tooltip Example

Let’s create a basic tooltip.

First, the HTML:

<button class="help-button">
  Help
</button>

<div class="tooltip">
  Learn more about this feature.
</div>

Now the CSS:

.help-button {
  anchor-name: --help;
}

.tooltip {
  position: absolute;
  position-anchor: --help;

  top: anchor(bottom);
  left: anchor(center);

  transform: translateX(-50%);
}

The tooltip uses the button as its anchor.

Therefore, if the button moves, the tooltip can remain positioned relative to it.

This is much cleaner than manually calculating coordinates with JavaScript.

CSS Anchor Positioning for Dropdown Menus

Dropdown menus are another common use case.

Imagine a navigation button:

<button class="products-button">
  Products
</button>

<div class="products-menu">
  <a href="#">Web Hosting</a>
  <a href="#">Domains</a>
  <a href="#">Email</a>
</div>

We can define the button as an anchor:

.products-button {
  anchor-name: --products;
}

Then position the menu:

.products-menu {
  position: absolute;
  position-anchor: --products;

  top: anchor(bottom);
  left: anchor(left);
}

Now the dropdown can remain connected to the Products button.

Of course, production menus require more work.

You still need to think about:

  • Accessibility
  • Keyboard navigation
  • Focus states
  • Opening and closing behavior
  • Mobile layouts

Anchor Positioning solves the positioning problem. It does not solve every part of the component.

What Happens Near the Edge of the Screen?

This is where positioning becomes especially interesting.

Imagine a tooltip positioned above a button.

That works until the button moves close to the top of the viewport.

Now there may not be enough space for the tooltip.

Traditionally, developers use JavaScript to detect available space.

Then they change the tooltip position.

Modern CSS introduces position fallback options to help handle these situations.

The browser can try another position when the preferred location does not fit.

For example:

Preferred position: Above the button.

Fallback position: Below the button.

This can make responsive floating interfaces much easier to build.

What Is position-try-fallbacks?

The position-try-fallbacks property allows developers to define alternative positions.

A simplified example may look like:

.tooltip {
  position: absolute;
  position-anchor: --help;

  position-area: top;
  position-try-fallbacks: flip-block;
}

The browser first tries the preferred position.

If there is not enough space, it can try another placement.

This reduces the need for custom JavaScript collision detection.

What Is position-area?

Another useful feature is position-area.

It provides a simpler way to describe where an anchored element should appear.

For example:

.tooltip {
  position: absolute;
  position-anchor: --help;
  position-area: top;
}

This places the tooltip in the area above the anchor.

Other positions can be used depending on the layout.

This can make the CSS easier to understand than manually defining every coordinate.

CSS Anchor Positioning vs. JavaScript

Does this mean JavaScript positioning libraries are no longer necessary?

Not always.

JavaScript still makes sense for complex components.

However, CSS can now handle more of the visual positioning.

JavaScript Approach

A traditional script may need to:

  1. Find the trigger element.
  2. Measure its position.
  3. Measure the floating element.
  4. Calculate coordinates.
  5. Check viewport boundaries.
  6. Recalculate after scrolling.
  7. Recalculate after resizing.

That can require significant logic.

CSS Approach

With Anchor Positioning, the browser understands the relationship between the elements.

CSS can describe where the floating element should appear.

The browser handles much of the positioning work.

This can lead to simpler code.

Does CSS Anchor Positioning Replace Popover?

No.

These features solve different problems.

The Popover API helps control the behavior of floating content.

For example, it can help with:

  • Showing popovers
  • Hiding popovers
  • Dismissing content
  • Managing top-layer behavior

CSS Anchor Positioning controls where the element appears.

Therefore, the two technologies can work together.

A developer might use:

Popover API → behavior

CSS Anchor Positioning → placement

This combination can reduce the amount of JavaScript needed for common UI components.

CSS Anchor Positioning and Accessibility

CSS can control where an element appears.

However, accessibility still requires careful development.

For interactive elements, developers should consider:

  • Keyboard navigation
  • Focus management
  • Semantic HTML
  • Screen readers
  • ARIA attributes
  • Escape-key behavior

For example, a dropdown menu should not only look correct.

Users should also be able to navigate it without a mouse.

Therefore, Anchor Positioning should be viewed as a layout tool, not a complete component system.

When Should You Use CSS Anchor Positioning?

Anchor Positioning is useful when one element needs to stay visually connected to another.

Good use cases include:

  • Tooltips
  • Dropdowns
  • Popovers
  • Floating labels
  • Context menus
  • Annotation interfaces
  • Interactive tutorials

It can also help reduce complicated positioning code.

However, you should still evaluate browser support before using it for critical functionality.

Progressive Enhancement

A good strategy is progressive enhancement.

Start with an interface that works without advanced positioning.

Then enhance the experience when the browser supports Anchor Positioning.

Developers can use feature queries such as:

@supports (anchor-name: --example) {
  /* Anchor Positioning styles */
}

This allows modern browsers to use the enhanced layout.

Meanwhile, other browsers can receive a simpler fallback.

Should You Remove Your JavaScript Positioning Library?

Not immediately.

If your current system works well, there may be no reason to rewrite everything.

Instead, evaluate Anchor Positioning for new components.

Start with something simple.

For example:

  1. Build a tooltip.
  2. Test it across browsers.
  3. Test responsive behavior.
  4. Test keyboard navigation.
  5. Test viewport boundaries.

Then decide whether the CSS approach works for your project.

Over time, you may be able to reduce your dependency on JavaScript positioning logic.

Why Native Browser Features Matter

CSS Anchor Positioning is part of a larger change in frontend development.

Browsers are gaining features that previously required JavaScript libraries.

Modern web platforms now provide better tools for:

  • Dialogs
  • Popovers
  • Animations
  • Layout
  • Responsive design
  • Form controls
  • Scroll behavior

This does not mean JavaScript is becoming unnecessary.

Instead, developers can use JavaScript for application logic while letting HTML and CSS handle more interface behavior.

That can make websites easier to maintain.

Frequently Asked Questions About CSS Anchor Positioning

What is CSS Anchor Positioning?

CSS Anchor Positioning allows one element to position itself relative to another element using CSS. The reference element is called an anchor.

What can I build with CSS Anchor Positioning?

Common examples include tooltips, dropdown menus, popovers, floating labels, and context menus.

Does CSS Anchor Positioning require JavaScript?

Basic positioning can be handled entirely with CSS. However, some interactive components may still need JavaScript for behavior and application logic.

What does anchor-name do?

The anchor-name property defines an element as a named anchor that another element can reference.

What is the anchor() function?

The anchor() function allows a positioned element to use the coordinates of its anchor when calculating its own position.

Does CSS Anchor Positioning replace the Popover API?

No. The Popover API controls behaviors such as opening and closing floating content. Anchor Positioning controls where that content appears.

Should I use CSS Anchor Positioning in production?

It depends on your browser requirements. Check current browser support and provide a fallback when necessary.

Final Thoughts

CSS Anchor Positioning solves a problem frontend developers have dealt with for years.

Tooltips, dropdowns, and popovers need to stay connected to other elements.

Traditionally, developers often used JavaScript to calculate their positions.

Now, CSS can handle much more of that work.

Features such as anchor-name, position-anchor, anchor(), and position fallbacks give developers new ways to build flexible interfaces.

The result can be less positioning code and cleaner components.

However, Anchor Positioning does not replace good accessibility or application logic.

Developers still need to think about keyboard navigation, browser support, responsive layouts, and user experience.

Still, the direction is clear.

Modern CSS is becoming powerful enough to solve problems that once required entire JavaScript libraries.

And CSS Anchor Positioning is one of the best examples of that change.