将 MatToolTip 与 Angular 中的图标一起使用 5

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

直接使用官方material图标元素：

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

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

Answer 2

对于工具提示无法正常工作的任何人，请 double-check 您的 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>

将 MatToolTip 与 Angular 中的图标一起使用 5

Using MatToolTip with icons in Angular 5

html

css

icons

tooltip

angular