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

【问题标题】：Tooltip issue, MatTooltip not working in Angular工具提示问题，MatTooltip 在 Angular 中不起作用
【发布时间】：2022-04-09 23:56:27
【问题描述】：

我正在尝试在我的仪表板页面中插入通知工具提示，但工具提示不起作用。我对 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>

【问题讨论】：

标签： angular angular-material tooltip angular-pipe

【解决方案1】：

要使用 Angular-Material Tooltip，您需要：

导入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

【讨论】：

如果您的应用包含多个模块，则导入必须在特定的 xyz.module.ts 中。
我无法通过悬停来完成这项工作。需要长按才能显示提示。
我还需要重启"ng serve"才能看到app.module.ts中的改动效果
在遵循所有可用教程后无法使其工作，谢谢谷歌

【解决方案2】：

我遇到了类似的问题。当我添加 Material 主题 CSS 时，它已修复。

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

【讨论】：

它可能已经回答了这个问题，因为缺少主题很可能是 matTooltip 不起作用的原因。
不确定这是否回答了原始用户的问题，但肯定对我有用。如果您只是尝试将工具提示作为您使用的第一个材料组件插入并且您没有看到工具提示，那么这可能是问题
就长度而言不是最佳答案，但绝对可以解决我的问题。

【解决方案3】：

如果您看到错误提示未找到材质主题，请将其中一个材质主题（例如此主题）添加到主 CSS 文件的第一行；

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

问题出在导入语句中这是正确的方法：

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

【讨论】：

这应该没什么区别。
这解决了我的问题。 MatTooltipModule 是模块，MatTooltip 是指令本身。