Tooltip For Angular

1.  Installation

    npm i ng2-tooltip-directive

2. Import Ng2Module

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

  @NgModule({

imports: [ TooltipModule ]

})

3. Usage

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

<span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span>

may pass as an object:

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

myOptions = {

'placement': 'left',

'show-delay': 500

}

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" content-type="template">

  Tooltip with template content

</span>