Components

Anchor

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

Use the default slot for the anchor target and the anchored slot for floating content. Set alignment to any valid position-area value.

Always Visible

Floating content that is always shown.

Floating content

Astro

---
import { Anchor } from "@opui/astro"
---

<Anchor>
  <button>Hover me</button>
  <span
    slot="anchored"
    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
  >
</Anchor>

Output

<span class="anchor" style="">
  <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

Set trigger="hover". The component adds interestfor and popover="hint" declaratively.

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

Tooltip content

Astro

---
import { Anchor } from "@opui/astro"
---

<Anchor trigger="hover" id="anchor-hover">
  <button
    interestfor="anchor-hover"
    commandfor="anchor-hover"
    command="toggle-popover">Hover me</button
  >
  <span slot="anchored"><div class="card elevated">Tooltip content</div></span>
</Anchor>

Output

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

Used By

API

Prop	Type	Default	Description
`alignment`	`string`	`"start end"`	Any valid `position-area` value. Controls where the floating content is placed.
`trigger`	`"always" \| "hover"`	`"always"`	When set to `"hover"`, wraps the anchor slot in an `interestfor` invoker and uses `popover="hint"` on the floating element.

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);
    }
  }
}