Slot and state hooks

• [data-slot="tooltip-trigger"] exposes data-state, optional data-disabled, and aria-describedby while open.
• [data-slot="tooltip-content"] carries role="tooltip", data-state, data-side, and [hidden].
• The root computes floating coordinates, so owners should style the content surface instead of hard-coding placement math.
• Keep pointer-events: none on tooltip content so it stays presentational.

Overlay z-index

Tooltip content uses var(--tng-tooltip-z-overlay, var(--tng-tooltip-overlay-z-index, var(--tng-z-overlay, 20))). Set --tng-tooltip-z-overlay on [tngTooltip] (or an ancestor), or set --tng-z-overlay app-wide so tooltips share the same stacking context as other overlays.

CSS starter

[tngTooltip] {
  --tng-tooltip-z-overlay: 1100;
}

/* or app-wide */
:root {
  --tng-z-overlay: 1100;
}

[data-slot="tooltip-trigger"] {
  border-radius: 0.7rem;
  min-height: 2.1rem;
  padding-inline: 0.9rem;
}

[data-slot="tooltip-trigger"][data-state="open"] {
  border-color: var(--tng-semantic-accent-brand);
}

[data-slot="tooltip-content"] {
  border: 1px solid var(--tng-semantic-border-subtle);
  border-radius: 0.7rem;
  box-shadow: 0 20px 36px color-mix(in srgb, #020617 24%, transparent);
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.45rem 0.62rem;
  pointer-events: none;
  white-space: nowrap;
}

[data-slot="tooltip-content"][data-side="top"] {
  transform-origin: bottom center;
}

[data-slot="tooltip-content"][data-side="right"] {
  transform-origin: center left;
}

[data-slot="tooltip-content"][hidden] {
  display: none !important;
}

Owner guidance

• Prefer short single-purpose hint copy. If users need actions or rich content, move to popover.
• Style focus on the trigger, not the tooltip body, because focus never enters the content.
• Use [hidden] overrides when utility classes force display so closed content does not remain visible.