Tooltip for Angular

Please note: This is a completely revised, Angular 16 compatible fork of ng2-tooltip-directive.

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

https://ivylab.space/tooltip

Installation

Install the npm package.

npm i ng2-tooltip-directive-ngfix

Import Ng2Module:

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

Usage

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

<span>Tooltip on top</span>

You may pass as an object:

<span>Tooltip on left</span>

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

You can pass HTML as content :

<span>
  Tooltip with HTML content
</span>

  <p>Hello i'm a <strong>bold</strong> text!</p>


<span>
  Tooltip with template content
</span>

Set default values

Create a file with your settings, for example:

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

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

And pass your parameters when importing the module:

import { TooltipModule, TooltipOptions } from 'ng2-tooltip-directive-ngfix';
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, he can do it for you.