Tooltip

A short label shown on hover or focus.

import { … } from '@inlaylab/ivorie/tooltip'

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvButton } from '@inlaylab/ivorie/button';
import { IV_TOOLTIP_IMPORTS } from '@inlaylab/ivorie/tooltip';

@Component({
  selector: 'demo-tooltip',
  imports: [IV_TOOLTIP_IMPORTS, IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-tooltip>
      <button ivButton ivTooltipTrigger variant="outline">Hover me</button>
      <iv-tooltip-content>Add to library</iv-tooltip-content>
    </iv-tooltip>
  `,
})
export default class TooltipDemo {}

Installation

CLI

npm

npx ivorie add tooltip

import { … } from '@inlaylab/ivorie/tooltip'

Shows a short label next to a trigger. The panel renders in a CDK overlay with an arrow.

Usage

import { IV_TOOLTIP_IMPORTS } from '@inlaylab/ivorie/tooltip';

<iv-tooltip>
  <button ivTooltipTrigger>Hover me</button>
  <iv-tooltip-content>This is a tooltip</iv-tooltip-content>
</iv-tooltip>

Examples

Provider

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvButton } from '@inlaylab/ivorie/button';
import { IV_TOOLTIP_IMPORTS } from '@inlaylab/ivorie/tooltip';

@Component({
  selector: 'demo-tooltip-provider',
  imports: [IV_TOOLTIP_IMPORTS, IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-tooltip-provider [delayDuration]="0">
      <div class="flex gap-2">
        <iv-tooltip>
          <button ivButton ivTooltipTrigger variant="outline">Save</button>
          <iv-tooltip-content>Save document</iv-tooltip-content>
        </iv-tooltip>
        <iv-tooltip>
          <button ivButton ivTooltipTrigger variant="outline">Share</button>
          <iv-tooltip-content>Share link</iv-tooltip-content>
        </iv-tooltip>
      </div>
    </iv-tooltip-provider>
  `,
})
export default class TooltipProviderDemo {}

Delay

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvButton } from '@inlaylab/ivorie/button';
import { IV_TOOLTIP_IMPORTS } from '@inlaylab/ivorie/tooltip';

@Component({
  selector: 'demo-tooltip-delay',
  imports: [IV_TOOLTIP_IMPORTS, IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-tooltip [delayDuration]="500">
      <button ivButton ivTooltipTrigger variant="outline">Slow tooltip</button>
      <iv-tooltip-content>Shows after 500ms</iv-tooltip-content>
    </iv-tooltip>
  `,
})
export default class TooltipDelayDemo {}

Side and align

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvButton } from '@inlaylab/ivorie/button';
import { IV_TOOLTIP_IMPORTS } from '@inlaylab/ivorie/tooltip';

@Component({
  selector: 'demo-tooltip-side-align',
  imports: [IV_TOOLTIP_IMPORTS, IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex gap-2">
      <iv-tooltip>
        <button ivButton ivTooltipTrigger variant="outline">Top</button>
        <iv-tooltip-content side="top">Above</iv-tooltip-content>
      </iv-tooltip>
      <iv-tooltip>
        <button ivButton ivTooltipTrigger variant="outline">Right</button>
        <iv-tooltip-content side="right" align="start">To the right</iv-tooltip-content>
      </iv-tooltip>
      <iv-tooltip>
        <button ivButton ivTooltipTrigger variant="outline">Bottom</button>
        <iv-tooltip-content side="bottom" align="end">Below</iv-tooltip-content>
      </iv-tooltip>
    </div>
  `,
})
export default class TooltipSideAlignDemo {}

Icon button

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { LucideSettings } from '@lucide/angular';
import { IvButton } from '@inlaylab/ivorie/button';
import { IV_TOOLTIP_IMPORTS } from '@inlaylab/ivorie/tooltip';

@Component({
  selector: 'demo-tooltip-icon-button',
  imports: [IV_TOOLTIP_IMPORTS, IvButton, LucideSettings],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-tooltip>
      <button ivButton ivTooltipTrigger variant="ghost" size="icon" aria-label="Settings">
        <svg lucideSettings></svg>
      </button>
      <iv-tooltip-content>Settings</iv-tooltip-content>
    </iv-tooltip>
  `,
})
export default class TooltipIconButtonDemo {}

Truncate

quarterly-financial-report-final-v2.pdf

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvTruncateTooltip } from '@inlaylab/ivorie/tooltip';

@Component({
  selector: 'demo-tooltip-truncate',
  imports: [IvTruncateTooltip],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p class="w-40 truncate rounded-md border px-3 py-2 text-sm" [ivTruncateTooltip]="name">
      {{ name }}
    </p>
  `,
})
export default class TooltipTruncateDemo {
  protected readonly name = 'quarterly-financial-report-final-v2.pdf';
}

API

Every part also accepts class.

Sets the default delay for every tooltip in its subtree.

Name	Type	Default	Description
`delayDuration`	`number`	`0`	Delay in ms before tooltips open.

Name	Type	Default	Description
`delayDuration`	`number \| undefined`	`undefined`	Per-tooltip delay in ms. Wins over the provider and the global token.

ivTooltipTrigger

Directive on the trigger element. No inputs.

Name	Type	Default	Description
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Side of the trigger.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment along the side axis.
`sideOffset`	`number`	`6`	Gap to the trigger in px.
`hidden`	`boolean`	`false`	Keeps the tooltip closed and removes `aria-describedby`.

ivTruncateTooltip

Shows the full text on hover, only when the host is clipped (scrollWidth > clientWidth). The host must already clip, for example with truncate, or be an <input>. Built into iv-select-trigger and iv-combobox-input.

<span class="truncate" [ivTruncateTooltip]="name">{{ name }}</span>

Name	Type	Default	Description
`ivTruncateTooltip`	`string \| null \| undefined`	`''`	Tooltip text. Empty text never shows.
`ivTruncateTooltipSide`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Side of the host.
`ivTruncateTooltipMeasure`	`HTMLElement \| null`	`null`	Element checked for clipping. Defaults to the host. Use it when the hover area is wider than the text.

TooltipPanelComponent

Internal panel used by ivTruncateTooltip. You do not use it directly.

Name	Type	Default	Description
`text`	`string`	`''`	Panel text.
`extraClass`	`string`	`''`	Extra classes for the panel.

Accessibility

The panel has role="tooltip".
While open and not hidden, the trigger has aria-describedby pointing at the panel. An aria-describedby already on the trigger is kept.
Opens on keyboard focus and closes on blur. Focus from a mouse press does not open it.
Escape, a click and a mouse press close it.
Moving the pointer from the trigger into the panel keeps it open.
The arrow is aria-hidden.

Notes

Delay order: delayDuration on iv-tooltip, then the nearest iv-tooltip-provider, then the IV_TOOLTIP_DELAY token. The token reads tooltipDelay from IV_CONFIG and falls back to 0.
Wrap the app shell in <iv-tooltip-provider [delayDuration]="0"> for instant tooltips.
The panel mounts only while open.
ivTruncateTooltip waits 200 ms, and hides on leave, press and blur.