Tooltip issue, MatTooltip not working in Angular

Question

I am trying to insert a notifications tooltip in my dashboard page, but the tooltip is not working. I am very new to Angular, so any leads regarding this will be highly appreciated.

module.ts

..     import {MatTooltipModule} from '@angular/material'; ..  @NgModule({ .. MatTooltipModule ..}) 

component.html

    <div class="notifications">         <i class="fa fa-bell fa-2x" aria-hiden="true" matTooltip="Tooltip!"></i>     </div> 

Answer 1

To use Angular-Material Tooltip you will need:

1. Import the BrowserAnimationsModule and MatTooltipModule:

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatTooltipModule } from '@angular/material/tooltip';  @NgModule({   imports: [     BrowserAnimationsModule,     MatTooltipModule,     // ... 

2. Add tooltip to your component

test.component.html

<div matTooltip="Tooltip!">Hover me</div> 

3. P.S If you haven't already installed and imported HammerJs you may need to (Material uses it for some animations and touch gestures):
   npm i -S hammerjs
npm i -D @types/hammerjs
   

And in your app.module.js import hammerjs:

import 'hammerjs';  

To view full working example see: https://stackblitz.com/angular/keqjqmxbrbg

Update

I found a memory leak in my application, due to extensive use of mat-tooltip (in a loop). This memory leak can be fixed by removing HammerJS.
For more info and other possible solutions (instead of removing HammerJS) see: https://github.com/angular/material2/issues/4499