Skip to content
Ndop UI

Tooltip

Tooltip changelog

Every version of Tooltip, newest first. Update with npx @ndop/cli update tooltip; it keeps your edits.

Preview an update

Paste your copy of the file to see what updating it to 1.0.0 would do.

Runs in your browser; your file isn't uploaded. If your ndop.json aliases differ from the registry's @/, import paths can show up as changes.

1.0.0 Latest

Stable release; no code changes since 0.2.0.

0.2.0

Every part of the item is now its own directive without the Nd prefix, which is kept for the headless primitives. Renames NdTooltip to Tooltip, NdTooltipPortal to TooltipPortal and NdTooltipTrigger to TooltipTrigger. Selectors and inputs are unchanged, and ndop update renames the imports and their uses in your code.

What ndop update does from 0.1.4

  • Updates {ui}/tooltip/tooltip.ts, keeping your edits.
  • Renames NdTooltip to Tooltip where your code imports it.
  • Renames NdTooltipPortal to TooltipPortal where your code imports it.
  • Renames NdTooltipTrigger to TooltipTrigger where your code imports it.
{ui}/tooltip/tooltip.ts
} from '@ndop/primitives/tooltip';
import { cn } from '@/lib/utils';

export { NdTooltip, NdTooltipPortal, NdTooltipTrigger };
/**
 * A tooltip (`@ndop/primitives/tooltip`): a short description of its
 * trigger, shown after a delay on hover and at once on keyboard focus. Put
 * it on an `ng-container`.
 *
 * @example
 * ```html
 * <ng-container ndTooltip>…</ng-container>
 * ```
 */
@Directive({
  selector: '[ndTooltip]',
  hostDirectives: [
    {
      directive: NdTooltip,
      inputs: ['open', 'defaultOpen', 'openDelay', 'closeDelay'],
      outputs: ['openChange'],
    },
  ],
})
export class Tooltip {}

/**
 * The element its tooltip describes, which shows it on hover and focus.
 *
 * @example
 * ```html
 * <button ndButton ndTooltipTrigger>Add to library</button>
 * ```
 */
@Directive({
  selector: '[ndTooltipTrigger]',
  hostDirectives: [NdTooltipTrigger],
  host: { 'data-slot': 'tooltip-trigger' },
})
export class TooltipTrigger {}

/**
 * Marks the `ng-template` its tooltip renders while open.
 *
 * @example
 * ```html
 * <ng-template ndTooltipPortal>…</ng-template>
 * ```
 */
@Directive({
  selector: 'ng-template[ndTooltipPortal]',
  hostDirectives: [NdTooltipPortal],
})
export class TooltipPortal {}

/**
 * The tooltip bubble.
 *
 * @example

0.1.4

Adds the tooltip-sides example: tooltips on each side. The files are unchanged.

0.1.3

Lists the item under Overlays in the docs. The files are unchanged.

0.1.2

Removes the source notice at the top of tooltip.ts. The credit for the shadcn/ui styles it was based on is on the docs site instead.

What ndop update does from 0.1.1

  • Updates {ui}/tooltip/tooltip.ts, keeping your edits.
{ui}/tooltip/tooltip.ts
/*
 * Styles from shadcn/ui new-york-v4 "tooltip" (MIT License, Copyright (c)
 * 2023 shadcn), copied on 2026-10-02 (ADR-0014). Changes:
 * - data-[side=left|right] become data-[side=start|end] with
 *   slide-in-from-end|start: Ndop sides are logical (RFC-0001);
 * - origin-(--radix-tooltip-content-transform-origin) is dropped: the CDK
 *   overlay sets no such variable;
 * - no arrow: the primitive doesn't position one;
 * - timing follows the primitive's contract (700 ms to open on hover,
 *   immediate on keyboard focus) rather than shadcn's instant default.
 */
import { computed, Directive, input } from '@angular/core';
import {
  NdTooltip,

0.1.1

Points the item at its API metadata, metadata/tooltip.json, which the docs and the MCP server read. The files are unchanged.

0.1.0

First release.

What ndop update does

  • Adds {ui}/tooltip/tooltip.ts.
  • Installs @ndop/primitives.
  • Installs the utils item.