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

Question

我可以将MatToolTip与按钮元素一起使用：

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

但是在尝试将它与div或span标签内的图标一起使用时，它不起作用：

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

我究竟做错了什么？

Answer 1

直接使用官方的材质图标元素：

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

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

Answer 2

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

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

我一直想知道为什么我的<mat-icon matTooltip="test">warning</mat-icon>不起作用，事实证明这就是原因。

Answer 3

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

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