Tooltip issue, MatTooltip not working in Angular

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,
    // ...
  1. Add tooltip to your component

test.component.html

<div matTooltip="Tooltip!">Hover me</div>
  1. 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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)