Niharika Pujari

Posted on Aug 14

CSS Anchor Positioning: Building Tooltips Without JavaScript Positioning Hacks

#a11y #css #webdev #javascript

Introduction

Positioning a tooltip sounds simple.

Put a small box next to a button. Done.

But anyone who has built one knows that it can quickly turn into:

position: absolute
calculating coordinates
listening for resize events
handling scrolling
checking whether the tooltip fits on screen
and sometimes pulling in an entire positioning library

Modern CSS is starting to change that.

CSS Anchor Positioning lets us position one element relative to another directly in CSS.

Let's look at what that means with a very simple tooltip.

What Is CSS Anchor Positioning?

CSS Anchor Positioning allows one element to act as an anchor and another element to position itself relative to that anchor.

Think about UI components such as:

Tooltips
Dropdown menus
Popovers
Context menus
Floating labels

These elements usually need to appear next to another element.

Instead of calculating where they belong with JavaScript, we can now describe that relationship in CSS.

Conceptually, we're saying:

"This button is my anchor. Position this tooltip relative to it."

A Simple Example

Imagine we have a button:

<button class="info-button">
  More info
</button>

<div class="tooltip">
  Your changes are saved automatically.
</div>

We want the tooltip to appear directly below the button.

First, let's make the button an anchor.

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

We've now given the button an anchor name.

Next, connect our tooltip to it.

.tooltip {
  position: absolute;
  position-anchor: --info-button;

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

  margin-top: 8px;
}

That's the interesting part.

top: anchor(bottom);

tells the browser:

Position the top of the tooltip at the bottom of the anchor.

And:

left: anchor(left);

aligns its left side with the button.

No getBoundingClientRect().

No coordinate calculations.

No resize listener just to figure out where the tooltip belongs.

Why Is This Useful?

Before Anchor Positioning, we often had to manage positioning ourselves.

A simplified JavaScript approach might look something like:

const button = document.querySelector('.info-button');
const tooltip = document.querySelector('.tooltip');

const rect = button.getBoundingClientRect();

tooltip.style.top = `${rect.bottom}px`;
tooltip.style.left = `${rect.left}px`;

Then reality happens.

What happens when the user scrolls?

What happens when the window resizes?

What happens when the layout changes?

Suddenly our "simple tooltip" isn't so simple anymore.

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

That's a much better abstraction.

What About the Edge of the Screen?

This is where Anchor Positioning gets even more interesting.

Imagine the tooltip normally appears underneath a button.

But the button is at the bottom of the viewport.

Instead of letting the tooltip disappear off-screen, CSS can define alternative positions using position fallbacks.

For example, the browser could try:

Below the button
Above the button
Another fallback position

That means some positioning logic traditionally handled by JavaScript can move into CSS.

Does This Mean We Don't Need JavaScript?

Not exactly.

This is an important distinction.

CSS Anchor Positioning solves positioning.

JavaScript may still be responsible for application behavior such as:

openTooltip();
closeTooltip();
loadContent();

And HTML should still provide the appropriate semantics.

CSS determines where the UI appears.

HTML determines what the UI means.

JavaScript determines how the UI behaves.

Keeping those responsibilities separate can make components much easier to maintain.

Don't Forget Accessibility

A tooltip looking correct doesn't automatically make it accessible.

You still need to think about:

Keyboard users
Focus behavior
Appropriate semantics
Whether information is available without a mouse
Whether content disappears before users can interact with it
Motion and zoom considerations

For some interfaces, native platform features such as the Popover API may also be worth considering alongside Anchor Positioning.

Modern CSS can simplify layout, but accessibility still needs to be part of the component design.

Should You Use CSS Anchor Positioning Today?

CSS Anchor Positioning has made significant progress across modern browsers, but browser support should still be checked against the requirements of your application.

For production applications supporting older browsers, progressive enhancement can be a good strategy.

You can check support before relying on the feature:

@supports (anchor-name: --my-anchor) {
  /* Anchor positioning styles */
}

That lets newer browsers take advantage of the feature while you maintain an appropriate fallback where necessary.

The Bigger Picture

What I find most interesting about Anchor Positioning isn't just the new syntax.

It's part of a broader shift happening on the web platform.

Things we historically solved with JavaScript are increasingly becoming native browser capabilities.

That can mean:

less JavaScript → fewer moving pieces → simpler frontend architecture

Of course, newer CSS isn't automatically better.

But when the browser already understands layout, positioning, scrolling, and rendering, letting the browser handle those responsibilities can often be cleaner than recreating them ourselves.