Tooltip issue, MatTooltip not working in Angular

If you see an error indicating no theme was found for material, add one of the material themes, like this one, to the first line of your main CSS file;

@import '@angular/material/prebuilt-themes/deeppurple-amber.css'; 

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


I had a similar problem. It was fixed when I added the Material theme CSS.

Check the console to see if it has a warning. Try adding the theme CSS to the parent file.