Angular中MatTooltip无法生效，求正确使用方法及故障排查

核心问题定位 #

你代码里的关键错误是误用了原生title属性，而非MatTooltip专属的matTooltip指令——MatTooltip组件不会识别原生title属性，这是导致功能失效的直接原因。

分步修复方案 #

1. 替换HTML中的指令 #

把HTML里的title属性替换为matTooltip，保留绑定的文本逻辑：

<div class="btn-edit-nounderline" matTooltipClass="custom-tooltip" 
     (click)="edit(row.widgetAccess)"  
     matTooltip="{{getTitle(row.widgetAccess.widgets.length)}}">
  <!-- 注意：这里要添加div的可见内容，比如图标、文字，空元素可能无法触发tooltip -->
</div>

2. 调整自定义样式位置 #

将.custom-tooltip的CSS代码从HTML中移到组件对应的样式文件（如.component.css）中，否则样式无法生效：

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

3. 确认模块导入的正确性 #

确保MatTooltipModule是在当前组件所属的NgModule中导入的，而非无关模块：

import { MatTooltipModule } from '@angular/material/tooltip';
import { YourTargetComponent } from './your-component.component'; // 替换为你的组件类名

@NgModule({
  declarations: [YourTargetComponent],
  imports: [
    MatTooltipModule
    // 其他必要模块，比如CommonModule、TranslateModule等
  ]
})
export class YourModule { }

4. 验证翻译函数的可用性 #

确保getTitle方法所在的组件已正确注入TranslateService，否则this.translate.instant会报错：

import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) { }

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

额外检查项 #

• 确认Angular Material主题已正确配置（在全局styles.css中导入主题文件），否则tooltip的基础样式可能无法加载：

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

• 检查目标div是否被其他元素遮挡，导致hover事件无法触发。

内容的提问来源于stack exchange，提问作者Nana