renderers/_shared/tooltip.css

/* ============================================================
   renderers/_shared/tooltip.css — CSS-only slot tooltips.
   One slot string couples cell markup (data-slot), grid
   placement, and tip copy (data-tip). Hovering any [data-slot]
   that CARRIES non-empty tip copy shows the tip; slots with no
   data-tip attribute — or an empty one — never render a box
   (the :not([data-tip=""]) guard).
   Sized to fit ~100-char interpretive copy (~46ch, wraps).
   ============================================================ */

.cf-card [data-slot][data-tip]:not([data-tip=""]) {
  position: relative;
  cursor: help;
}

.cf-card [data-slot][data-tip]:not([data-tip=""])::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-one));
  z-index: 40;
  width: max-content;
  max-width: min(46ch, 84cqi);
  padding: var(--space-two) var(--space-three);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font);
  font-size: var(--size-footnote);
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  text-indent: 0;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-quick) ease;
}

.cf-card [data-slot][data-tip]:not([data-tip=""]):hover::after,
.cf-card [data-slot][data-tip]:not([data-tip=""]):focus-visible::after {
  opacity: 1;
  visibility: visible;
}