¿Cómo usar matTooltip en material angular?

Angular Material es una biblioteca de componentes de interfaz de usuario desarrollada por el equipo de Angular para crear componentes de diseño para aplicaciones web móviles y de escritorio. Para instalarlo, necesitamos tener angular instalado en nuestro proyecto, una vez que lo haya hecho, puede ingresar el comando a continuación y puede descargarlo. matTooltip se usa cuando se debe mostrar cierta información cuando un usuario pasa el mouse sobre un botón.

Sintaxis de instalación:

ng add @angular/material

Acercarse:

• Primero, instale el material angular usando el comando mencionado anteriormente.
• Después de completar la instalación, importe » desde ‘@angular/material/tooltip’ en el archivo app.module.ts.
• Necesitamos usar la propiedad ‘matTooltip’ para mostrar el texto que queremos representar.
• Para mostrar la posición necesitamos usar la propiedad ‘matTooltipPosition’.
• También podemos personalizar la posición de la información sobre herramientas con respecto a dónde mostrar, como usar los siguientes nombres como «arriba», «abajo», «izquierda», «derecha», etc.
• Una vez que haya terminado con los pasos anteriores, sirva o comience el proyecto.

Estructura del proyecto:

Implementación de código:

aplicación.módulo.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 { }

aplicación.componente.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>

Producción: