Angular Material 7 – 工具提示

<MatTooltip>，是一个 Angular 指令，用于显示材料化的工具提示。

在本章中，我们将展示使用 Angular Material 显示工具提示所需的配置。

下面是修改后的模块描述符 app.module.ts 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatTooltipModule } from '@angular/material'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatButtonModule, MatTooltipModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

下面是修改后的 HTML 宿主文件 app.component.html 的内容。

   点击我!

结果

验证结果。

详细信息

• 这里，我们使用 mat-button 创建了一个按钮，在鼠标悬停时，将显示一个工具提示。