Tooltip for Angular

V18.1.0 for Angular 18.0.1

V4.0.2 for Angular 17.3.7

V4.0.1 for Angular 17.0.9

V3.0.2 for Angular 16.0.5

V2.0.1 for Angular 15.0.4

V1.0.3 for Angular 14.2

The tooltip is a pop-up tip that appears when you hover over an item or click on it.

🔬️ Help make Tooltips better by answering a few questions.

Demo

http://ivylab.space/tooltip

Installation

Install the npm package.

// npm i ng2-tooltip-directive

  npm i @amin-karimi/ng2-tooltip-directive

Import standalone:

import { TooltipDirective } from '@amin-karimi/ng2-tooltip-directive';
 
@Component({
    imports: [ TooltipDirective ]
}) 

Import Ng2Module:

import { TooltipModule } from '@amin-karimi/ng2-tooltip-directive';
 
@NgModule({
    imports: [ TooltipModule ]
}) 

Usage

Options can be set in the directive tag, so they have the highest priority.

<span tooltip="Tooltip" placement="top" showDelay="500">Tooltip on top</span>

You may pass as an object:

<span tooltip="Tooltip" [options]="myOptions">Tooltip on left</span>

myOptions = {
    'placement': 'left',
    'showDelay': 500
}

You can pass HTML as content :

<span tooltip="<p>Hello i'm a <strong>bold</strong> text!</p>">
  Tooltip with HTML content
</span>

<ng-template #HtmlContent>
  <p>Hello i'm a <strong>bold</strong> text!</p>
</ng-template>

<span [tooltip]="HtmlContent" contentType="template">
  Tooltip with template content
</span>

Set default values

Create a file with your settings, for example:

import { TooltipOptions } from 'ng2-tooltip-directive';

export const MyDefaultTooltipOptions: TooltipOptions = {
  'show-delay': 500
}

And pass your parameters when importing the module:

//import { TooltipModule, TooltipOptions } from 'ng2-tooltip-directive';
import { TooltipModule, TooltipOptions } from '@amin-karimi/ng2-tooltip-directive';
import { MyDefaultTooltipOptions } from './my-default-options';
 
@NgModule({
    imports: [ 
      TooltipModule.forRoot(MyDefaultTooltipOptions as TooltipOptions)
    ]
})

Properties

Events

When you call events, the delays that are specified in the options in the directive are taken into account. Default delay before tooltip hiding is 300 milliseconds.

Methods

If you specified the directive options, they will be taken into account when calling methods. Including the delay before the appearance and hiding of the tooltip.

Author services

Are you interested in this library but lacks features? Write to the author,(https://github.com/Amin-Karimi), he can do it for you.

Sponsors

We use Browserstack for cross-browser testing.