在 Angular 5 中使用带有图标的 MatToolTip

Question

I am able to use MatToolTip along with a button element:

<button mat-mini-fab color="primary" (click)="fn()">
                <span matTooltip="myMessage">
                  <i class="material-icons">delete</i>
                </span>
              </button>

But on trying to use it with an icon which is within a div or span tag, it doesn't work:

    <div matToolTip="myMessage">
      <i style="line-height: 0px; font-size: 25px; cursor: pointer; " (click)="fn()" class="material-icons">delete</i>
    </div>

What am I doing wrong?

Answer 1

Just use the official material icon element:

<mat-icon matTooltip="My tooltip">delete</mat-icon>

You can of course style it however you want, enclose it in a div and give that div a class, add event listeners, etc.

Answer 2

For anyone stuck with tooltips not working, please double-check your app.module.ts file. Make sure that your imports: [...] array includes MatTooltipModule , and that you are importing MatTooltipModule with the other imports.

If you don't include these things, tooltips simply won't work, yet there will also be no errors in the console.

I got stuck wondering why my <mat-icon matTooltip="test">warning</mat-icon> wasn't working, turns out this is why.

Answer 3

对于希望将变量绑定到matTooltip任何人，您需要使用表达式[matTooltip]将其绑定，因此它看起来像这样：

<mat-icon class='colorInfo' [matTooltip]="tooltipVariable">info_outline</mat-icon>