如何在Angular Material中使用matTooltip

Angular Material是一个由Angular团队开发的UI组件库，用于构建桌面和移动Web应用程序的设计组件。为了安装它，我们需要在我们的项目中安装Angular，一旦你完成了安装，你可以输入下面的命令并可以下载它。 matTooltip用于当用户悬停在一个按钮上要显示某些信息时。

安装:

ng add @angular/material

步骤:

• 首先，使用上述命令安装角质材料。
• 完成安装后，在app.module.ts文件中从’@angular/material/tooltip’导入’MatTooltipModule’ 。
• 我们需要使用’matTooltip’属性来显示我们要渲染的文本。
• 为了显示位置，我们需要使用’matTooltipPosition’属性。
• 我们还可以自定义工具提示的位置，比如使用以下名称 “上面”、”下面”、”左边”、”右边 “等来显示。
• 一旦完成了上述步骤，就可以服务或开始项目。

项目结构：它将看起来像如下。

代码实现:

app.module.ts:

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

app.component.html:

<br>
<button mat-raised-button matTooltip=
    "Hover to display information on below."
        matTooltipPosition="below">
    Hover to show information
</button>
  
<br><br><br><br><br>
  
<button mat-raised-button matTooltip=
    "Hover to display information on right."
        matTooltipPosition="right">
    Hover to show information
</button>

输出: