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

Tooltip overview

Tooltip provides a ready-made trigger button and minimum floating hint shell for short helper text. For full DOM ownership, use the separate headless tooltip docs.

Imports

Use the wrapper when your team wants a built-in trigger plus tooltip behavior with minimal markup.

Wrapper imports

ts
import { TngTooltipComponent } from '@tailng-ui/components';

Usage patterns

Wrapper usage

html
<tng-tooltip
  triggerLabel="Hover for hint"
  text="Use this to filter countries quickly."
  side="top"
  [openDelay]="120"
  [closeDelay]="80"
></tng-tooltip>

Style variants

The same wrapper behavior rendered with local CSS or Tailwind utility shells.

Wrapper tooltip (plain CSS)

open: false

Keyboard baseline

  • Tab to the built-in trigger opens the tooltip for keyboard users.
  • Shift+Tab or blur closes the tooltip.
  • Escape closes the wrapper tooltip while focus stays on the trigger.
  • Tooltips should stay non-interactive and out of tab order.