Tooltip

Display additional information on hover.

Import

Import the Tooltip primitives from ng-primitives/tooltip.

import { NgpTooltip } from 'ng-primitives/tooltip';

Usage

Assemble the tooltip directives in your template.

<button [ngpTooltipTrigger]="tooltip">Hover me</button>

<ng-template #tooltip>
  <div ngpTooltip>Tooltip content</div>
</ng-template>

API Reference

The following directives are available to import from the ng-primitives/tooltip package:

NgpTooltip

Apply the ngpTooltip directive to an element that represents the tooltip. This typically would be a div inside an ng-template.

• Selector: [ngpTooltip]
• Exported As: ngpTooltip

NgpTooltipTrigger

Apply the ngpTooltipTrigger directive to an element that triggers the tooltip to show.

• Selector: [ngpTooltipTrigger]
• Exported As: ngpTooltipTrigger

Define the content of the tooltip. This should be reference to an `ng-template`. Define the open state. Event emitted when the state changes. Define the offset from the trigger element. Define the disabled state. Define the placement of the tooltip. Define the delay before the tooltip shows. Define the delay before the tooltip hides. Define if the tooltip should flip when it reaches the edge of the viewport. Define the container element for the tooltip. This is the document body by default.

Data Attributes

Attribute	Description	Value
data-state	The state of the tooltip.	closed | closing | open | opening
data-disabled	The disabled state.	true | false

Global Configuration

You can configure the default options for all tooltips in your application by using the provideNgpTooltipConfig function in a providers array.

import { provideNgpTooltipConfig } from 'ng-primitives/tooltip';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgpTooltipConfig({
      offset: 4,
      placement: 'top',
      showDelay: 0,
      hideDelay: 0,
      flip: true,
      container: document.body,
    }),
  ],
});

NgpTooltipConfig

Define the offset from the trigger element. Define the placement of the tooltip. Define the delay before the tooltip shows. Define the delay before the tooltip hides. Define if the tooltip should flip when it reaches the edge of the viewport. Define the container element for the tooltip. This is the document body by default.