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

【问题标题】：Using MatToolTip with icons in Angular 5在 Angular 5 中使用带有图标的 MatToolTip
【发布时间】：2018-10-13 20:07:07
【问题描述】：

我可以将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>

我做错了什么？

【问题讨论】：

标签： html css angular icons tooltip

【解决方案1】：

只需使用官方材质图标元素即可：

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

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

【讨论】：

有效！另外，知道为什么它使用按钮元素而不是图标吗？
如果这是您的第一个工具提示，请务必导入模块 :) import { MatTooltipModule } from '@angular/material/tooltip';

【解决方案2】：

对于任何遇到工具提示无法正常工作的人，请仔细检查您的 app.module.ts 文件。确保您的 imports: [...] 数组包含 MatTooltipModule，并且您正在导入 MatTooltipModule 和其他导入。

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

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

【讨论】：

谢谢！我也被困住了。
没错！控制台没有错误，但导入后它起作用了。

【解决方案3】：

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

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

【讨论】：