CODEWITHSUNDEEP
htmlcssangulariconstooltip
rahs
rahs

Reputation: 1899

Using MatToolTip with icons in Angular 5

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?

Upvotes: 25

Views: 61043

Answers (3)

RohitAneja
RohitAneja

Reputation: 1011

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>

Upvotes: 6

chris c
chris c

Reputation: 401

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.

Upvotes: 25

bugs
bugs

Reputation: 15313

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.

Upvotes: 41

Related Questions