Recipe — Anchor positioning

cia’s tooltip and dropdown mixins style the element but leave positioning to the consumer. For browsers that support CSS anchor positioning (anchor() + position-area), here’s the recipe — pure CSS, no JS, no Floating UI.

Chrome 125+ Firefox 144+ (~2026) Safari TP 0 KB JS

Tooltip anchored to a button

<!-- HTML -->
<button id="help-btn"
        style="anchor-name: --help"
        popovertarget="help-tip" type="button">?</button>

<div id="help-tip"
     popover="hint"
     class="cia-tooltip">
  Helpful message
</div>

/* CSS — position the tooltip above the button */
#help-tip {
  position-anchor: --help;
  position-area: top;
  margin-block-end: var(--space-1, 0.5rem);
}

Dropdown menu anchored below a trigger

<button id="menu-btn"
        style="anchor-name: --menu"
        popovertarget="user-menu" type="button">Menu</button>

<div id="user-menu" popover class="cia-dropdown">
  ...
</div>

#user-menu {
  position-anchor: --menu;
  position-area: bottom span-right;
  margin-block-start: var(--space-1);
}

position-area cheat sheet

Common values for the position-area property:

• top · bottom · left · right — centered on the named edge
• top center · bottom center — explicit centering
• top start · top end — aligned to start/end of the anchor
• bottom span-right — spans the right edge of the anchor (good for menus)
• top span-all — spans the full width of the anchor

Fallback for older browsers

If a browser doesn’t support anchor() / position-area, the popover still opens — it just positions wherever the browser’s default popover placement puts it (top of the viewport in current implementations). For a controlled fallback:

@supports not (position-area: top) {
  #help-tip {
    position: absolute;
    inset-inline-start: var(--fallback-x, 1rem);
    inset-block-start:  var(--fallback-y, 2.5rem);
  }
}

Caveats

• Browser support is still rolling out. Test in your target browsers. As of 2026: Chrome solid, Firefox 144+, Safari TP only.
• Anchor names are global within the document. Use unique names like --user-menu-anchor if you have multiple anchored popovers.
• The popover already lives in the top layer. No z-index needed.