如何使用mattooltip？

Question

How can I use mattooltip for here? It does not work.

 <div class="btn-edit-nounderline" matTooltipClass="custom-tooltip" 
 (click)="edit(row.widgetAccess)"  title=" 
 {{getTitle(row.widgetAccess.widgets.length)}}">

.custom-tooltip {
background-color:pink;
}

in ts file i have:

import { MatTooltipModule } from 

'@angular/material/tooltip/tooltip-module';

@NgModule({
 imports: [
 
 MatTooltipModule

]

})

getTitle(editWidgetsNum) {

return this.translate.instant('Edit_WidgetsNum', {n: editWidgetsNum});

}

Answer 1

material tooltips need the matTooltip property set. It will not work with title.

 <button mat-raised-button matTooltip="Info about the action" aria-label="Button that displays a tooltip when focused or hovered over"> Action </button>

Source

Answer 2

Try this way [matTooltip]="PropertyName" instead of title=" {{getTitle(row.widgetAccess.widgets.length)}}"

Working example is here: https://stackblitz.com/edit/angular-mat-tooltip-2b4fqy?file=main.ts,app%2Ftooltip-overview-example.ts,app%2Ftooltip-overview-example.html,app%2Ftooltip-overview-example.css

Refer below screen shots HTML File and TS