Angular Material实现仅文本溢出显示省略号时触发Tooltip

你的问题很典型——用字符长度判断是否显示Tooltip的方式不够准确，因为不同字符（比如中文和英文）的宽度差异会导致判断失误。我们可以通过判断元素实际是否溢出来精准控制Tooltip的显示，这在Angular里用自定义指令实现是最优雅的方案。

解决方案：自定义指令监听元素溢出状态 #

1. 创建自定义指令 #

生成一个名为ShowTooltipOnOverflowDirective的指令，用来检测元素是否溢出，并动态设置matTooltip的显示状态：

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';

@Directive({
  selector: '[appShowTooltipOnOverflow]'
})
export class ShowTooltipOnOverflowDirective {
  @Input() appShowTooltipOnOverflow: string; // 绑定Tooltip的内容

  constructor(private el: ElementRef, private tooltip: MatTooltip) {}

  // 监听鼠标进入事件，判断是否显示Tooltip
  @HostListener('mouseenter') onMouseEnter() {
    const element = this.el.nativeElement;
    // 判断元素内容是否溢出：scrollWidth > clientWidth
    const isOverflowing = element.scrollWidth > element.clientWidth;
    // 设置Tooltip的内容并控制显示
    if (isOverflowing) {
      this.tooltip.message = this.appShowTooltipOnOverflow;
      this.tooltip.show();
    } else {
      this.tooltip.hide();
    }
  }

  // 监听窗口 resize 事件，避免窗口变化导致溢出状态改变后Tooltip逻辑失效
  @HostListener('window:resize') onWindowResize() {
    const element = this.el.nativeElement;
    const isOverflowing = element.scrollWidth > element.clientWidth;
    if (!isOverflowing && this.tooltip.isVisible()) {
      this.tooltip.hide();
    }
  }
}

2. 在组件模块中声明指令 #

记得把这个指令添加到你的组件所在模块的declarations数组里：

import { NgModule } from '@angular/core';
import { ShowTooltipOnOverflowDirective } from './show-tooltip-on-overflow.directive';
// 其他导入...

@NgModule({
  declarations: [
    // 其他组件/指令...
    ShowTooltipOnOverflowDirective
  ],
  // 其他配置...
})
export class YourModule { }

3. 修改HTML模板 #

移除原来的matTooltip条件判断，改用我们的自定义指令：

<td mat-cell [attr.id]="hospital.organizational_id + '_hospitalname'" *matCellDef="let hospital"> 
  <div id="hospital_name" class="truncate" 
       matTooltip="" 
       [appShowTooltipOnOverflow]="hospital.organization_name">
    {{hospital.organization_name}} 
  </div> 
</td>

4. 保留原有CSS #

你的truncate类样式可以继续使用，确保文本溢出时显示省略号：

.truncate { 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  overflow: hidden; 
  display: block !important; 
}

为什么这个方案有效？ #

• 精准判断溢出：通过元素的scrollWidth（内容实际宽度）和clientWidth（元素可视宽度）对比，能准确知道文本是否溢出显示省略号，不受字符类型影响。
• 响应式适配：监听窗口resize事件，确保窗口大小变化时，溢出状态的判断依然有效。
• Angular风格：用自定义指令封装逻辑，代码可复用，符合Angular的组件化思想，比jQuery操作DOM更优雅。

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