Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 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.

Reference CSS

tooltip-styling.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);
  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;
}