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>

Gil Epshtain · Accepted Answer · 2020-09-27T07:59:09.853

66

To use Angular-Material Tooltip you will need:

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,
    // ...

Add tooltip to your component

test.component.html

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

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

edited Sep 27 '20 at 07:59

answered Jan 31 '18 at 15:12

Gil Epshtain

8,670
7
63
89

If your app consists of several modules, the import must be in that specific xyz.module.ts. – gumo Dec 12 '19 at 09:21
I'm unable to get this working with hover. Long press required to reveal tip. – Adam Cox Jun 19 '20 at 15:19
1

I also needed to restart "ng serve" to see the effect of the changes in app.module.ts – otembajelle Sep 27 '20 at 07:52
Impossible to make it work after following all available tutorials, thank you google – Eta Dec 21 '21 at 10:32
import "MatTooltipModule" saved me. thanks – TroniPM Dec 05 '22 at 21:58

Caleb Grams · Answer 2 · 2018-03-16T03:12:49.137

14

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.

edited Mar 16 '18 at 03:12

answered Mar 05 '18 at 23:42

Caleb Grams

273
3
14

3

It might have answered the question, because a missing theme can well be the reason for a non-working matTooltip. – user2543253 Jun 26 '18 at 16:55
1

Not sure if this answered the original users question or not but definitely did the trick for me. If you're just trying to plug tooltip in as the first material component you use and you don't see the tooltip, this could be the problem – flamebaud Sep 18 '18 at 02:02
1

Not the best answer in terms of length, but definitely solve my problem. – Omar Martinez Nov 16 '18 at 18:08

score 11 · Answer 3 · answered Sep 24 '19 at 20:30

11

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

answered Sep 24 '19 at 20:30

JWP

6,672
3
50
74

1

After searching for hours this finally fixed my issue. Why didn't anybody else mention this? Thanks JWP, great hint :) – zreptil May 25 '22 at 19:30

score 2 · Answer 4 · edited Nov 27 '19 at 22:00

2

Problem is in the import statement Here's the correct way:

import { MatTooltipModule} from '@angular/material/tooltip';

edited Nov 27 '19 at 22:00

Bwvolleyball

2,593
2
19
31

answered Nov 29 '17 at 09:06

Sam David

45
1

That should not make a difference. – mfit Sep 15 '18 at 12:20
This resolved my issue. `MatTooltipModule` is the module, and `MatTooltip` is the Directive itself. – Thisura Dodangoda Sep 03 '21 at 20:13

score 2 · Answer 5 · answered Mar 21 '19 at 09:39

2

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

answered Mar 21 '19 at 09:39

Avinash Manohar

344
3
4

score 0 · Answer 6 · answered Jun 15 '22 at 08:21

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.

score 0 · Answer 7 · answered Aug 13 '22 at 02:54

0

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

answered Aug 13 '22 at 02:54

mb-ca

469
1
4
15

score 0 · Answer 8 · answered Dec 30 '22 at 16:03

0

In my case, the button was disabled, and so apparently the tooltip doesn't display for disabled buttons.

answered Dec 30 '22 at 16:03

Christopher Oliver

41
5

Tooltip issue, MatTooltip not working in Angular

8 Answers8

Update

Linked