Использование 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

Если кто-то застрял с неработающими подсказками, перепроверьте файл app.module.ts. Убедитесь, что ваш массив imports: [...] включает MatTooltipModule и что вы импортируете MatTooltipModule с другими импортами.

Если вы не включите эти вещи, всплывающие подсказки просто не будут работать, но в консоли также не будет ошибок.

Я застрял, задаваясь вопросом, почему мой <mat-icon matTooltip="test">warning</mat-icon> не работал, оказывается, именно поэтому.

Answer 2

Просто используйте официальный значок элемента материала:

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

Вы, конечно, можете стилизовать его так, как хотите, заключить его в div и присвоить этому div класс, добавить прослушиватели событий и т. Д.