Angular Tooltip is a pop-up tip that displays when you hover over an item or click on it. It is used for presenting additional information about an item to users. It will be a brief message. 

Here is an example code in this: if you hover over or click on the words ‘you probably’ , ‘have a’, ‘’whatever keytar’, ‘twitter handle’ it will display tiny messages. 

Tight pants next level keffiyeh

<a href="#" mdbTooltip="Basic tooltip" placement="top">you probably</a>

haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table

seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel

<a href="#" mdbTooltip="Another tooltip" placement="top">have a</a>

terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel

williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan

<a href="#" mdbTooltip="Again, basic tooltip" placement="top">whatever keytar</a>

,scenester farm-to-table banksy Austin

<a href="#" mdbTooltip="And the last tooltip" placement="top">twitter handle</a>

freegan cred raw denim single-origin coffee viral.

You can use HTML to customize the title of your  tooltip.

<ng-template #popTemplate> <div [innerHtml]="html"></div></ng-template>

<button

  type="button"

  mdbBtn

  color="primary"

  class="waves-light"

  [mdbTooltip]="popTemplate"

  mdbWavesEffect

>

  Tooltip with html

</button>

To show and hide or toggle the tooltip you can use show(), hide() methods. Also pass $event argument to show() function.

<p>

  <span mdbTooltip="Hello there! I was triggered manually" triggers="" #pop="mdb-tooltip">  

This text has attached to it a tooltip 

</span>

</p>

<button type="button" mdbBtn color="success" class="waves-light" (click)="pop.show($event)" mdbWavesEffect>

  Show

</button>

<button type="button" mdbBtn color="warning" class="waves-light" (click)="pop.hide()" mdbWavesEffect>

  Hide

</button>

Installation

Install npm package using the command.

npm i ng2-tooltip-directive

Now import Ng2Module using the below command.

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