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?

Answer 1

对于任何因工具提示不起作用而卡住的人，请仔细检查您的 app.module.ts 文件。确保您的imports: [...]数组包含MatTooltipModule，并且您正在将 MatTooltipModule 与其他导入一起导入。

如果您不包含这些内容，工具提示将无法正常工作，但控制台中也不会出现错误。

我一直想知道为什么我的<mat-icon matTooltip="test">warning</mat-icon>不工作，结果这就是原因。

Answer 2

只需使用官方材料图标元素：

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

当然，您可以根据需要设置样式，将其包含在div中并为该div提供一个类，添加事件侦听器等。

Answer 3

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

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