Tooltip

Recipe CSS

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

/* === Tooltip ===
   Hidden by default; reveals on hover/focus of the parent .tt wrapper.
   Add .tt--always for forced-open demos (gallery card uses this so users
   see the tooltip without needing to hover).
   Left-aligned to the trigger's edge so wide labels don't overflow the
   card's padding rail. */
.tt {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.tt__pop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  /* Inverse-emphasis surface (H1): the canonical dark-tooltip-on-light-UI
     (and vice versa) now wears the NAMED inverse roles instead of an ad-hoc
     fg/bg swap — same read, real vocabulary (M3 inverse-surface). */
  background: var(--k-inverse-surface);
  color: var(--k-inverse-fg);
  font-size: var(--k-type-eyebrow);
  padding-block: var(--k-s-4);
  padding-inline: max(var(--k-s-8), calc(var(--k-radius-md) * 0.5));
  border-radius: var(--k-radius-md);
  /* Cap width + wrap long copy so a wordy tooltip never runs off a narrow
     viewport (was nowrap with no max-width → horizontal overflow). */
  max-width: min(16rem, calc(100vw - 1rem));
  opacity: 0;
  pointer-events: none;
  /* Tooltip: fast fade — ease-out on enter, ease-in on exit (handled by
     omitting transition-property override; same transition runs both ways
     and shorter dur keeps it from feeling sluggish on flicker-hovers) */
  transition: opacity var(--k-dur-fast, 120ms) var(--k-ease, ease);
  z-index: var(--k-z-tooltip);
}
/* Placement — static (no JS collision-flip; pick the side that clears the viewport
 * edge, or portal it in your framework). Default opens ABOVE, start-aligned. */
.tt__pop--bottom { top: calc(100% + var(--k-s-6)); bottom: auto; }
.tt__pop--right { left: calc(100% + var(--k-s-6)); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
.tt__pop--left { right: calc(100% + var(--k-s-6)); left: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
.tt:hover .tt__pop,
.tt:focus-within .tt__pop,
.tt--always .tt__pop {
  opacity: 1;
}