Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

Styling contract

Headless tooltip exposes trigger and content hooks while the root still owns floating placement. You style the surface, density, and state feedback without replacing the behavior.

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.

CSS starter

headless-tooltip.css

css
[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.