Saturday, February 27, 2021

Tooltip For Angular

1.  Installation

    npm i ng2-tooltip-directive

2. Import Ng2Module

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


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


<ng-template #HtmlContent>

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


 <span [tooltip]="HtmlContent" content-type="template">

  Tooltip with template content


No comments:

Post a Comment