Tooltip issue, MatTooltip not working in Angular

Issue

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>

Solution

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

Answered By - Gil Epshtain