Imports

Bring in the root plus the two slot directives when you want full ownership of the markup.

import {
  TngTooltip,
  TngTooltipContent,
  TngTooltipTrigger,
} from '@tailng-ui/primitives';

Basic composition

The root manages delays and floating placement. Trigger and content stay semantic and owner-authored.

<span tngTooltip side="top" [openDelay]="120" [closeDelay]="60">
  <button type="button" tngTooltipTrigger>Hover for hint</button>
  <span tngTooltipContent id="country-filter-tip">
    Use this to filter countries quickly.
  </span>
</span>

Behavior baseline

• mouseenter and keyboard focus open the root-managed tooltip.
• mouseleave, blur, outside pointer, and Escape close the tooltip.
• Positioning is computed in JavaScript with side flipping and viewport collision handling.
• Tooltip content stays non-interactive and should remain outside the tab order.