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

API reference

The wrapper surface centers on <tng-tooltip>. For primitive directives and root-owned positioning details, use the headless tooltip docs.

Wrapper component: <tng-tooltip>

Input / OutputTypeDescription
triggerLabelstringFallback trigger text rendered by the built-in button.
textstringFallback tooltip message when no projected content is provided.
side'top' | 'right' | 'bottom' | 'left'Placement hint exposed through data-side on tooltip content and flipped when needed.
openDelay, closeDelaynumberDelay in milliseconds before open/close transitions are applied.
disabledbooleanDisables hover/focus interactions and keeps tooltip closed.
ariaLabelstring | nullAccessible label for the built-in trigger button.
openChangebooleanEmits each time wrapper state changes from open to closed (and vice versa).

Projected content

SurfacePurposeNotes
[trigger] slotProjects custom trigger content into the built-in wrapper button.Use this for icons or branded trigger labels without replacing the wrapper behavior.
Default content slotProjects tooltip body content into the floating shell.Fallbacks to text when nothing is projected. Keep the content short and non-interactive.

Behavior baseline

  • Tab to a trigger opens the tooltip for keyboard users.
  • Blur, mouseleave, outside pointer, and Escape close the tooltip and remove aria-describedby.
  • Tooltip content stays non-interactive and should remain outside the tab order.
  • The wrapper exposes the same slot and state hooks as the primitive, but keeps trigger and content markup on a stable minimum shell.