Tooltip issue, MatTooltip not working in Angular

问题

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>

回答1:

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

回答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.

回答3:

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

回答4:

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

回答5:

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

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

来源：https://stackoverflow.com/questions/47152530/tooltip-issue-mattooltip-not-working-in-angular

标签

angular

angular-material

tooltip