如何使用mattooltip？

Question

我如何在这里使用 mattooltip？ 这没用。

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

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

在 ts 文件中我有：

import { MatTooltipModule } from 

'@角/材料/工具提示/工具提示模块';

@NgModule({
 imports: [
 
 MatTooltipModule

]

})

getTitle(editWidgetsNum) {

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

}

Answer 1

材质工具提示需要 matTooltip 属性集。 它不适用于标题。

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

资源

Answer 2

试试这种方式[matTooltip]="PropertyName"而不是title=" {{getTitle(row.widgetAccess.widgets.length)}}"

工作示例在这里： 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

请参阅下面的屏幕截图HTML 文件和TS