Getting StartedInstallation and setup guides 6
FormInput and selection components 26
LayoutWorkflow and structural layout components 10
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

Styling contract

The wrapper forwards slot and state hooks through its built-in trigger and floating content, so teams can restyle the shell without depending on internal DOM structure.

Core data attributes

  • [data-slot="tooltip-trigger"] exposes data-state, optional data-disabled, and aria-describedby when open.
  • [data-slot="tooltip-content"] carries role="tooltip", data-state, data-side, and [hidden] while closed.
  • data-side supports top, right, bottom, and left placement styles.
  • The wrapper owns floating coordinates. Style the surface, not the placement math, and keep pointer-events: none on tooltip content.

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 tng-tooltip (or an ancestor), or set --tng-z-overlay app-wide so tooltips share the same stacking context as other overlays.

Reference CSS

tooltip-styling.css

css
tng-tooltip {
  --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);
  padding: 0.45rem 0.62rem;
  pointer-events: none;
}

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

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