Проблема с подсказкой, MatTooltip не работает в Angular

Я пытаюсь вставить всплывающую подсказку с уведомлениями на страницу панели инструментов, но эта подсказка не работает. Я очень новичок в Angular, поэтому любые предложения по этому поводу будут высоко оценены.

module.ts

.. import {MatTooltipModule} из '@angular/material'; ..

@NgModule({
..
MatTooltipModule
..})

component.html

    <div class="notifications">
        <i class="fa fa-bell fa-2x" aria-hiden="true" matTooltip="Tooltip!"></i>
    </div>

Ответы

Ответ 1

Чтобы использовать подсказку angular материала, вам потребуется:

Импортируйте BrowserAnimationsModule и MatTooltipModule:

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatTooltipModule,
    // ...

Добавьте всплывающую подсказку к своему компоненту

test.component.html

<div matTooltip="Tooltip!">Hover me</div>

P.S Если вы еще не установили и не импортировали HummerJ, вам может понадобиться (материал использует его для анимации и сенсорных жестов):
npm i -S hammerjs
npm i -D @types/hammerjs

И в вашем app.module.js импортируйте hammerjs:

import 'hammerjs';

Для просмотра полного рабочего примера см.: https://stackblitz.com/angular/keqjqmxbrbg

Обновление

Я обнаружил утечку памяти в моем приложении из-за широкого использования mat-tooltip (в цикле). Эту утечку памяти можно устранить, удалив HummerJS.
Для получения дополнительной информации и других возможных решений (вместо удаления HummerJS) см.:https://github.com/angular/material2/issues/4499

Ответ 2

У меня была похожая проблема. Это было исправлено, когда я добавил тему материала CSS.

Проверьте консоль, чтобы узнать, есть ли у нее предупреждение. Попробуйте добавить тему CSS в родительский файл.

Ответ 3

Если вы видите ошибку, указывающую на то, что тема не найдена для материала, добавьте одну из тем материала, как эта, в первую строку вашего основного файла CSS;

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Ответ 4

Посмотрите, как это выглядит так: если у вас есть отдельный модуль для отложенной загрузки или чего-то еще, вы должны повторно импортировать MatTooltipModule там.

Ответ 5

Проблема в инструкции импорта Здесь правильный путь,

import {MatTooltipModule} из '@angular/material/tooltip';