Popover

Recipe CSS

This is the exact CSS your kit ships for Popover — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Popover ===
   Floating panel anchored to a trigger. Always-open variant for the gallery
   uses .popover--open; in real apps, toggle the class on click. */
.popover-wrap { position: relative; display: inline-flex; }
.popover {
  position: absolute;
  top: calc(100% + var(--k-s-8));
  left: 0;
  min-width: var(--k-overlay-min, 12rem);
  padding: var(--k-s-12);
  background: var(--k-surface-overlay, var(--k-surface-raised));
  border: var(--k-hairline, 1px solid var(--k-border));
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-lg);
  font-size: var(--k-type-small);
  color: var(--k-fg);
  z-index: var(--k-z-popover);
  /* shadcn/Radix enter — scale + fade anchored to trigger via transform-origin */
  transform-origin: top left;
  animation: var(--k-anim-scale-in, k-scale-in 200ms cubic-bezier(.05,.7,.1,1)) backwards;
}
/* Arrow pointing back at the trigger — single rotated square, border-clipped */
.popover__arrow {
  position: absolute;
  top: calc(var(--k-s-10) / -2);
  left: var(--k-s-16);
  width: var(--k-s-10);
  height: var(--k-s-10);
  background: var(--k-surface-overlay, var(--k-surface-raised));
  border-top: var(--k-divider);
  border-left: var(--k-divider);
  transform: rotate(45deg);
}
/* Placement — static (no JS collision-flip; pick the side that clears the edge).
 * Default opens below, start-aligned. --top opens above; --end right-aligns. */
.popover--top { top: auto; bottom: calc(100% + var(--k-s-8)); transform-origin: bottom left; }
.popover--top .popover__arrow { top: auto; bottom: calc(var(--k-s-10) / -2); transform: rotate(225deg); }
.popover--end { left: auto; right: 0; transform-origin: top right; }
.popover--end .popover__arrow { left: auto; right: var(--k-s-16); }