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

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

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

Answer 3

对于那些坚持使用工具提示无法正常工作的人，请仔细检查您的app.module.ts文件。确保您的imports: [...]数组包含MatTooltipModule，并确保您将MatTooltipModule与其他导入一起导入。

如果您不包括这些内容，则工具提示将完全不起作用，但控制台中也不会出现任何错误。

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

使用MatToolTip和Angular 5中的图标

3 个答案: