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

就用官方的material icon元素:

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

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