CSS Anchor-Positioned Tooltip Menu — Free Native Anchor Positioning Demo

<div class="demo-wrap">
  <p class="demo-note">The menu below is positioned relative to its trigger button using only the native CSS Anchor Positioning API (<code>anchor-name</code>, <code>position-anchor</code>, <code>anchor()</code>) &mdash; no JavaScript computes its coordinates in a supporting browser. In an unsupporting browser, a small JS fallback measures the button and positions the menu the old-fashioned way.</p>

  <div class="trigger-row">
    <button class="anchor-btn" id="anchorBtn" popovertarget="anchorMenu" aria-haspopup="menu">
      Account <span aria-hidden="true">&#9662;</span>
    </button>
  </div>

  <ul class="anchor-menu" id="anchorMenu" popover role="menu">
    <li role="none"><button role="menuitem" class="menu-item">Profile</button></li>
    <li role="none"><button role="menuitem" class="menu-item">Billing</button></li>
    <li role="none"><button role="menuitem" class="menu-item">Team settings</button></li>
    <li role="none" class="menu-divider"></li>
    <li role="none"><button role="menuitem" class="menu-item danger">Sign out</button></li>
  </ul>

  <div class="fallback-badge" id="fallbackBadge" hidden>JS fallback positioning active (anchor-name unsupported here)</div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body{font-family: system-ui, -apple-system, sans-serif; background: #0d0f1a; color: #dfe1f0; min-height: 100vh;display:flex;align-items:center;justify-content:center}

.demo-wrap { max-width: 480px; margin: 0 auto; padding: 60px 20px 220px; }
.demo-note { font-size: 12.5px; color: #8b91b0; line-height: 1.6; background: #12131f; border: 1px solid #232a3d; border-radius: 10px; padding: 12px 14px; margin-bottom: 28px; }
.demo-note code { font-family: 'SFMono-Regular', Consolas, monospace; color: #a78bfa; }

.trigger-row { display: flex; }
.anchor-btn {
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  background: #1c2138; color: #dfe1f5; border: 1px solid #323966;
  padding: 10px 16px; border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;

  /* Names this button as an anchor other elements can position against.
     A plain custom-ident, scoped to this element only. */
  anchor-name: --account-anchor;
}
.anchor-btn:hover { border-color: #6366f1; }
.anchor-btn:focus-visible { outline: 3px solid #6366f1; outline-offset: 2px; }

.anchor-menu {
  list-style: none;
  margin: 0;
  width: 220px;
  background: #171a28;
  border: 1px solid #2c3350;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  /* Popover API resets browser default UA styling for [popover] */
  color: inherit;
}
.anchor-menu:not(:popover-open) { display: none; }

.menu-item {
  width: 100%; text-align: left;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  background: transparent; color: #dfe1f5; border: none;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
}
.menu-item:hover { background: #232a45; }
.menu-item:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
.menu-item.danger { color: #fca5a5; }
.menu-divider { height: 1px; background: #2c3350; margin: 6px 4px; }

.fallback-badge { margin-top: 14px; font-size: 11.5px; color: #fbbf24; background: #2a2210; border: 1px solid #4d3e12; border-radius: 8px; padding: 8px 12px; display: inline-block; }

/* ---- Native CSS Anchor Positioning ----
   position-anchor ties this element to the anchor-name declared above;
   the anchor() function then reads that anchor's edges directly in CSS,
   with no JS measuring pass. This is a genuinely new API: full support
   landed in Chrome/Edge 125+ (2024); as of 2026 it is NOT yet supported
   in Firefox or Safari, both still tracking the spec. */
@supports (anchor-name: --a) {
  .anchor-menu {
    position: fixed;
    position-anchor: --account-anchor;
    top: anchor(--account-anchor bottom);
    left: anchor(--account-anchor left);
    margin-top: 8px;
  }
}

const anchorBtn = document.getElementById('anchorBtn');
const anchorMenu = document.getElementById('anchorMenu');
const fallbackBadge = document.getElementById('fallbackBadge');

// Feature-detect the Anchor Positioning API. If the browser doesn't
// understand anchor-name, CSS.supports reports it and we fall back to a
// plain JS-computed position instead of leaving the menu mispositioned.
const supportsAnchorPositioning =
  typeof CSS !== 'undefined' && CSS.supports && CSS.supports('anchor-name: --a');

if (!supportsAnchorPositioning) {
  fallbackBadge.hidden = false;

  function positionMenuManually() {
    const rect = anchorBtn.getBoundingClientRect();
    anchorMenu.style.position = 'fixed';
    anchorMenu.style.top = (rect.bottom + 8) + 'px';
    anchorMenu.style.left = rect.left + 'px';
    anchorMenu.style.margin = '0';
  }

  anchorBtn.addEventListener('click', () => {
    // The popover API itself (open/close/light-dismiss) is broadly
    // supported independent of anchor positioning, so we only need to
    // patch the *position*, not the show/hide behavior.
    requestAnimationFrame(positionMenuManually);
  });
  window.addEventListener('resize', () => {
    if (anchorMenu.matches(':popover-open')) positionMenuManually();
  });
  window.addEventListener('scroll', () => {
    if (anchorMenu.matches(':popover-open')) positionMenuManually();
  }, true);
}