Winkelmaterial 7 - Tooltip

Das <MatTooltip>, eine Winkelrichtlinie, wird verwendet, um einen Tooltip im Materialstil anzuzeigen.

In diesem Kapitel wird die Konfiguration vorgestellt, die erforderlich ist, um einen Tooltip mit Angular Material anzuzeigen.

Es folgt der Inhalt des modifizierten Moduldeskriptors 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 { }

Es folgt der Inhalt der geänderten HTML-Hostdatei app.component.html.

<button mat-raised-button
   matTooltip = "Sample Tooltip"
   aria-label = "Sample Tooltip">
   Click Me!
</button>

Ergebnis

Überprüfen Sie das Ergebnis.

Einzelheiten

  • Hier haben wir eine Schaltfläche mit mat-button on hover erstellt. Wir zeigen einen Tooltip.