Angular Material 7 提示
<MatTooltip>(角度指令)用于显示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 { }
下面是修改后的app.component.html文件内容。
<button mat-raised-button matTooltip = "Sample Tooltip" aria-label = "Sample Tooltip"> Click Me! </button>
结果
细节
这里,我们使用mat-button创建了一个按钮,鼠标悬停时的我们将显示一个工具提示。