Getting StartedOwnable model, workflow, and first local install 2
LayoutInstallable layout wrappers with local source ownership 6
OverlayInstallable overlay wrappers with local source ownership 3
FeedbackInstallable feedback wrappers with local source ownership 5
FormInstallable form components 11
UtilityInstallable utility wrappers with local source ownership 6
NavigationInstallable navigation components 6
ToolingCLI and registry contracts 2
ReleasePublishing and workflow structure for the ownable surface 1

Tooltip

The ownable Tooltip install gives your app a local helper-text wrapper with editable trigger copy, content defaults, and nearby styling for compact guidance patterns.

Why own Tooltip locally

Tooltips stay small, but teams still tailor trigger wording, content tone, and shell styling to the product surface using them. Local ownership keeps those adjustments close to the screen that depends on the hint.

  • Adjust trigger labels, icon treatment, and density without waiting on a package release.
  • Keep helper copy, local analytics hooks, and styling tokens versioned with the owning feature.
  • Extend the generated wrapper if your product later adds richer trigger or hint variants.

What the install includes

The registry-backed tooltip install writes the local wrapper component, template, stylesheet, export barrel, and the primitive helper file used by the generated source. After install, your app owns the wrapper and can evolve the helper-text presentation locally.

Ownable Install

Install Tooltip from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm

bash
pnpm dlx tailng add tooltip

Generated files

The command scaffolds local files under src/app/tailng-ui/tooltip.

  • src/app/tailng-ui/tooltip/tng-tooltip-primitive.ts
  • src/app/tailng-ui/tooltip/tng-tooltip.ts
  • src/app/tailng-ui/tooltip/tng-tooltip.html
  • src/app/tailng-ui/tooltip/tng-tooltip.css
  • src/app/tailng-ui/tooltip/index.ts

Import in your feature module/component

Imports

ts
import { TngTooltip, TngTooltipTrigger, TngTooltipContent } from './tailng-ui/tooltip';

Usage

Template usage

html
<tng-tooltip
  triggerLabel="What does this do?"
  text="Tooltips should stay short and non-interactive."
></tng-tooltip>