工具提示问题，MatTooltip 在 Angular 中不起作用

Question

我正在尝试在我的仪表板页面中插入通知工具提示，但该工具提示不起作用。我是 Angular 的新手，因此非常感谢任何与此相关的线索。

module.ts

..
    import {MatTooltipModule} from '@angular/material';
..

@NgModule({
..
MatTooltipModule
..})

component.html

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

Answer 1

导入语句有问题正确的方法是：

import { MatTooltipModule} from '@angular/material/tooltip';

Answer 2

要使用 Angular-Material 工具提示，您需要：

导入 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 如果您尚未安装和导入 HammerJs，您可能需要（Material 将其用于某些动画和触摸手势）：
npm i -S hammerjs
npm i -D @types/hammerjs

然后在你的 app.module.js 中导入 hammerjs:

import 'hammerjs';

要查看完整的工作示例，请参阅：https://stackblitz.com/angular/keqjqmxbrbg

更新

由于大量使用 mat-tooltip（在循环中），我在我的应用程序中发现了内存泄漏。可以通过删除 HammerJS 来修复此内存泄漏。
有关更多信息和其他可能的解决方案（而不是删除 HammerJS），请参阅： https://github.com/angular/material2/issues/4499

Answer 3

我遇到了类似的问题。当我添加 Material 主题 CSS.

时，它已修复

检查控制台是否有警告。尝试将主题 CSS 添加到父文件。

Answer 4

看到它是这样的，如果你有单独的模块用于延迟加载或其他东西，那么你应该在那里重新导入 MatTooltipModule。

Answer 5

如果您看到一条错误消息，指示未找到 material 主题，请将其中一个 material 主题添加到主 CSS 文件的第一行，例如这个;

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

工具提示问题，MatTooltip 在 Angular 中不起作用

Tooltip issue, MatTooltip not working in Angular

tooltip

angular-material

angular-pipe

angular

更新