Hover Card

Recipe CSS

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

/* === Hover Card ===
   Like Popover, but auto-reveals on hover/focus. Used for inline profile
   previews, definitions, link expansions. */
.hover-card {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  color: var(--k-primary);
}
.hover-card__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  /* A touch wider than menus/popovers (rich content), but tied to the same knob. */
  min-width: calc(var(--k-overlay-min, 12rem) + 3rem);
  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);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity var(--k-dur-fast) var(--k-ease, ease), transform var(--k-dur-fast) var(--k-ease, ease);
  z-index: var(--k-z-popover);
}
.hover-card:hover .hover-card__pop,
.hover-card:focus-within .hover-card__pop,
.hover-card--open .hover-card__pop {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Placement — static (no JS collision-flip). Default opens below, start-aligned. */
.hover-card__pop--top { top: auto; bottom: calc(100% + var(--k-s-8)); }
.hover-card__pop--end { left: auto; right: 0; }