工具提示问题，MatTooltip 在 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>

Answer 1

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. PS 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

Answer 2

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.

Answer 3

如果你看到一个错误，表明没有找到材质的主题，添加一个材质主题，比如这个，到你的主 CSS 文件的第一行；

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

Answer 4

看到它是这样的，如果你有单独的模块用于延迟加载或其他东西，那么你应该在那里重新导入 MatTooltipModule 。

Answer 5

问题出在导入语句中，这是正确的方法：

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

Answer 6

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 .

Answer 7

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

Answer 8

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