Components

Anchor

A structural primitive for positioning floating content relative to an anchor element using CSS Anchor Positioning.

Add the .anchor class to a container. The first child becomes the anchor target. Place floating content inside .anchor-floating. Use --anchor-position-area to control placement.

Always Visible

Floating content that is always shown.

Floating content

HTML

<span class="anchor">
  <button>Hover me</button>
  <span class="anchor-floating">
    <span
      style="background: var(--surface-2); padding: var(--size-2) var(--size-3); border-radius: var(--radius-2); box-shadow: var(--shadow-3);">Floating
      content</span>
  </span>
</span>

Hover Trigger

Add interestfor on the trigger element pointing to the .anchor-floating ID.

Add interestfor, commandfor, and command="toggle-popover" to the anchor trigger so touch devices can tap to show the floating content.

Tooltip content

HTML

<span class="anchor">
  <button interestfor="anchor-hover-1" commandfor="anchor-hover-1" command="toggle-popover">Hover me</button>
  <span class="anchor-floating" id="anchor-hover-1" popover="hint">
    <div class="card elevated">Tooltip content</div>
  </span>
</span>

Used By

API

Type	Modifiers	Default	Description
Container	`.anchor`	-	Wrapper element. Provides `anchor-scope` and sets `anchor-name` on its first child.
Floating	`.anchor-floating`	-	Positioned floating element. Uses `position-anchor` and `position-area`.
Position	`--anchor-position-area`	`start end`	CSS custom property. Any valid `position-area` value.
Trigger	`data-trigger="hover"`	-	Shows floating content on hover/focus. Add `interestfor` on the trigger element pointing to the `.anchor-floating` ID.

Browser support

See also the full browser support guide.

Installation

anchor.css

@layer components.root {
  :where(.anchor) {
    anchor-name: --anchor;
    anchor-scope: --anchor;
    display: inline-block;
    inline-size: fit-content;

    /* Always-visible */
    &>.anchor-floating:not([popover]) {
      block-size: max-content;
      inline-size: max-content;
      position: absolute;
      position-anchor: --anchor;
      position-area: var(--anchor-position-area, start end);
      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
    }

    /* Hover-triggered */
    &>.anchor-floating[popover] {
      inset: unset;
      margin: 0;
      position: absolute;
      position-area: var(--anchor-position-area, start end);
      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
    }
  }
}