Tooltip issue, MatTooltip not working in Angular

user_7808237 0
Viewed 81087

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>
angular-pipe angular-material angular tooltip
7 Answers

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

user_26586830

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';
user_15225480

See it goes like this, if you have separate module for lazy loading or something, then you should re-import MatTooltipModule there.

user_112367120

For anyone who is rendering elements inside a *ngFor and using matTooltip, I suggest adding TrackBy function. That solved my issue.

"A function optionally passed into the NgForOf directive to customize how NgForOf uniquely identifies items in an iterable." https://angular.io/api/core/TrackByFunction.

user_80940120

My problem was that I was trying to use it inside of a mat-label. Removing it from the label worked.

user_88453830
Related