在 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>

我究竟做错了什么？

原文由 rahs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

直接使用官方的material icon元素即可：

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

您当然可以根据需要设置样式，将其封装在一个 div 中并给该 div 一个类，添加事件监听器等。

原文由 bugs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

如果你不包括这些东西，工具提示根本就不会工作，但控制台中也不会有错误。

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

原文由 chris c 发布，翻译遵循 CC BY-SA 4.0 许可协议