Angular material 工具提示未按预期显示

Question

我一直在各种教程网站上翻找，试图让 material 工具提示发挥作用。超级令人沮丧，因为它看起来真的很简单。控制台不显示任何错误或警告。我正在使用 Angular 11。据我了解，一旦我将 MatTooltipModule 导入到我的 app.module.ts 中，此功能将可用于同一模块中的所有组件。

npm list @angular/core
finfo@0.0.0 C:\source\finfo
+-- @angular/core@11.2.9
`-- codelyzer@6.0.1
  `-- @angular/core@9.0.0
npm list @angular/material
C:\source\finfo
`-- @angular/material@11.2.8

....app.module.ts....
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
....app.module.ts....
imports: [
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatButtonModule,
    MatCardModule,
    MatTooltipModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes),

....store.html....
<div>
  <button matTooltip="Info about the action"
      matTooltipPosition="above"
      class="example-button">
      Action
  </button>
</div>

更新：Zunayed Shahriar 提供的答案是正确的。一个小的附录，无论出于何种原因，在我将 @import 语句移至 .css 文件的顶部之后，我的项目开始使用工具提示。

Answer 1

对我来说工作得很好。

确保在 styles.css 文件中导入 material CSS（取决于您的主题）。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

演示在 StackBlitz。

结果：

Angular material 工具提示未按预期显示

Angular material tooltip does not display as expected

tooltip

angular-material

angular