tooltip

<!-- .sk-tooltip — a hint shown on hover and on keyboard focus.

     The bubble is a real element referenced by aria-describedby, so a screen
     reader announces it with the trigger whether or not it is visible. It is
     never the only place the information exists — see the README on WCAG
     1.4.13, which this pattern cannot fully satisfy without script. -->
<span class="sk-tooltip">
  <button
    type="button"
    class="sk-tooltip__trigger"
    aria-describedby="sk-tooltip-save"
  >
    Save
  </button>
  <span id="sk-tooltip-save" role="tooltip" class="sk-tooltip__bubble">
    Saves without leaving the page
  </span>
</span>

<span class="sk-tooltip">
  <button
    type="button"
    class="sk-tooltip__trigger"
    aria-describedby="sk-tooltip-archive"
  >
    Archive
  </button>
  <span id="sk-tooltip-archive" role="tooltip" class="sk-tooltip__bubble">
    Hidden from the list, kept for 30 days
  </span>
</span>

/* .sk-tooltip — a hint on hover and on keyboard focus, with no JavaScript.

   Not built on popover. Showing a popover requires showPopover() or an
   invoker, and CSS can do neither — `interesttarget` is the attribute meant to
   fix that and it is still origin-trial (unsupported in Chromium, WebKit and
   Gecko as of this writing). So the bubble is an ordinary element toggled by
   sibling selectors, which works everywhere today.

   The trade is that the bubble is not in the top layer: it can be clipped by an
   ancestor with overflow: hidden. The README says so.

   Specs:
   - :focus-visible ......... https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
   - role=tooltip ........... https://w3c.github.io/aria/#tooltip
   - SC 1.4.13 .............. https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html */

/* Public theme knobs (ADR 0011). Read, never declared — so a consumer can set
   any of them at :root, on a section, or on one instance, and it wins. */
.sk-tooltip {
  --_trigger-bg: var(--sk-tooltip-trigger-bg, var(--sk-color-surface));
  --_trigger-fg: var(--sk-tooltip-trigger-fg, var(--sk-color-text));
  --_trigger-border: var(--sk-tooltip-trigger-border-color, var(--sk-color-border-strong));
  --_trigger-radius: var(--sk-tooltip-trigger-radius, var(--sk-radius-md));
  --_bg: var(--sk-tooltip-bg, var(--sk-color-text));
  --_fg: var(--sk-tooltip-fg, var(--sk-color-bg));
  --_radius: var(--sk-tooltip-radius, var(--sk-radius-sm));
  --_gap: var(--sk-tooltip-gap, var(--sk-space-2xs));
  --_max-inline-size: var(--sk-tooltip-max-inline-size, 16rem);

  position: relative;
  display: inline-block;
}

.sk-tooltip__trigger {
  border: var(--sk-border-width) solid var(--_trigger-border);
  border-radius: var(--_trigger-radius);
  background: var(--_trigger-bg);
  color: var(--_trigger-fg);
  padding-block: var(--sk-space-xs);
  padding-inline: var(--sk-space-md);
  font-weight: var(--sk-weight-medium);
  min-block-size: var(--sk-size-tap-target);
}

/* Absolutely positioned, so showing it never moves the page — the layout-shift
   requirement in the PRD. It is hidden with visibility rather than display so
   it can transition, and both keep it available to aria-describedby (verified
   in all three engines: a directly referenced element describes its trigger
   even while hidden). */
.sk-tooltip__bubble {
  position: absolute;
  inset-block-end: calc(100% + var(--_gap));
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  inline-size: max-content;
  max-inline-size: var(--_max-inline-size);
  padding-block: var(--sk-space-2xs);
  padding-inline: var(--sk-space-xs);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--sk-text-xs);
  line-height: var(--sk-leading-snug);
  text-align: start;

  /* A tooltip is a hint, never a target. Pointer events on it would let the
     cursor "catch" the bubble and keep it open over other content. */
  pointer-events: none;
}

/* Hover on the whole wrapper rather than only the trigger, so the bubble does
   not flicker out when the pointer crosses the gap between them — the
   "hoverable" half of SC 1.4.13. */
.sk-tooltip:hover .sk-tooltip__bubble,
.sk-tooltip__trigger:focus-visible + .sk-tooltip__bubble {
  visibility: visible;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .sk-tooltip__bubble {
    transition:
      opacity var(--sk-motion-fast) var(--sk-ease-out),
      visibility var(--sk-motion-fast) var(--sk-ease-out);
  }
}

/* Under forced colors the bubble must not be an invisible block of Canvas on
   Canvas; give it a border so its edges survive. */
@media (forced-colors: active) {
  .sk-tooltip__bubble {
    border: var(--sk-border-width) solid CanvasText;
  }
}