MatToolTip 在 Angular 中无法正常工作

Question

I am using MatToolTip in one of my lazy loaded modules, and I am not getting any error, but all the tooltip texts ( that are provided to the matTooltip property ) are shown on the left bottom corner of the screen and not on the element where the tooltip is supposed to show.

It was working just fine when I was using Angular 9, but now I moved Annular 11 and the texts are not in their appropriate positions

Here is the html code where I am using matToolTip

 <div
      mat-raised-button
      matTooltip="No changes made"
      [matTooltipDisabled]="active"
      [class.save-active]="active"
      (click)="save.emit()"
      class="save"
 >
  {{ text }}
 </div>

This is how my SharedModule looks like

import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
...,
 imports: [..., MatTooltipModule,],
 exports: [...,  MatTooltipModule,],
})

export class SharedModule {}

and this is how my AppModule looks like

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
...,
 imports: [
     ...,     
     BrowserModule,
     BrowserAnimationsModule
 ]
})

export class AppModule {}

Anyone has an idea what might be going on?

Answer 1

Try adding the Material CSS inside your styles.css like this:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";