Using MatToolTip with icons in Angular 5

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?

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

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

Solution 3

For anyone looking to bind variable to matTooltip, you need to bind it using expression [matTooltip] so it will look something like this:

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