Components

Anchor

A structural primitive to enable CSS Anchor Positioning on stuff.

Always Visible

Floating content that is always shown.

Floating content

Vue

<script setup lang="ts">
import { Anchor } from "opui-css/vue"
</script>

<template>
  <Anchor>
    <button>Hover me</button>
    <template #anchored
      ><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
      ></template
    >
  </Anchor>
</template>

Output

<span class="ui-anchor" style=""
  ><!--[--><button>Hover me</button
  ><!--]--><span class="ui-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

Vue

<script setup lang="ts">
import { Anchor } from "opui-css/vue"
</script>

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

Output

<span class="ui-anchor" style="" id="anchor-hover"
  ><span interestfor="s1-0"
    ><!--[--><button
      interestfor="anchor-hover"
      commandfor="anchor-hover"
      command="toggle-popover"
    >
      Hover me</button
    ><!--]--></span
  ><span class="ui-anchor-floating" id="s1-0" popover="hint"
    ><!--[--><span><div class="ui-card ui-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(.ui-anchor) {
    anchor-name: --anchor;
    anchor-scope: --anchor;
    display: inline-block;
    inline-size: fit-content;

    /* Always-visible */
    & > .ui-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 */
    & > .ui-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);
    }
  }
}