Popover with Anchor Positioning

What Makes a Popover Different from a Tooltip

A tooltip is a passive label triggered by hover or focus. A popover is an interactive panel triggered by click, often containing actions, form fields, or rich content. Anchor positioning works the same way for both, but popovers usually need:

1. A larger gap (8–16px instead of 4–8px)
2. A pointing arrow to disambiguate which anchor the popover belongs to
3. Robust fallbacks (popovers are bigger and more likely to overflow)

.popover-trigger {
  anchor-name: --popover-1;
}

.popover {
  position: absolute;
  position-anchor: --popover-1;
  position-area: bottom;
  margin-top: 12px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 16px;
  width: 280px;

  position-try-fallbacks: flip-block;
}

/* Arrow pointing up at the anchor */
.popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

Auto-flipping the arrow

When flip-block triggers and the popover opens upward, the arrow should flip too. Until @position-try named fallbacks ship in all browsers, the cleanest approach is two arrows (top and bottom) shown conditionally with the :has() selector or a JS-set data attribute. For most apps the visual mismatch is acceptable on the rare overflow.

Width strategies

Three common width patterns for popovers:

1. Fixed width (above): width: 280px — predictable, what most design systems use.
2. Match anchor: min-width: anchor-size(width) — for "expand the trigger downward" feel.
3. Min/max with content: min-width: 240px; max-width: 480px — for variable content.