升级到 Angular 11 后，Angular 材质工具提示不起作用答案

【问题标题】：Angular Material Tooltip not working after upgrade to Angular 11升级到 Angular 11 后，Angular 材质工具提示不起作用
【发布时间】：2020-12-08 23:45:01
【问题描述】：

我一直在我的应用程序中使用 Angular Material 工具提示，但是当我最近升级到 Angular 11 时，它已经停止工作。我在模板中创建了一个测试组件，代码如下，我直接从https://material.angular.io/components/tooltip/overview复制过来的

<button mat-raised-button
        matTooltip="Info about the action"
        aria-label="Button that displays a tooltip when focused or hovered over">
  Action
</button>

我打开了 Chrome 开发工具，当我悬停时我可以看到模板发生的变化，但我仍然看不到屏幕上的工具提示。

我已经安装了 Angular Material，并且我已经导入了所有必要的模块，所以我不确定问题是什么（可能只是 Angular Material 中的一个错误？）

【问题讨论】：

能否分享您的代码，因为它在 Angular 11 中运行良好。stackblitz.com/edit/angular-5c1338?file=src/styles.scss
快速检查：如果您说您可以看到与期望显示工具提示相关的 HTML 更改 - 它是否在其他内容后面呈现？你有没有设置高于工具提示的 z-index？
好的，我想我知道发生了什么。工具提示本身看起来没有背景（我希望它周围有一个灰色框），所以它似乎是不可见的。我将页面的背景设置为蓝色，并且可以看到白色字母的工具提示文本。我想现在我只需要弄清楚为什么背景样式搞砸了。 @Krenom

标签： angular angular-material angular11

【解决方案1】：

我有一个自定义主题 .scss 文件。我发现我需要一些主题中的工具提示条目，这是我以前没有的。不知道为什么现在需要但以前不需要。我加了

tooltip: map_get($mat-grey, 700)

到我的 scss 文件中的几个位置。见github.com/angular/components/issues/18139

【讨论】：