如何实现仅当文本显示省略号(...)时才触发tooltip？

针对你的Angular表格场景（使用PrimeNG pTooltip 和Angular Material表格），要实现仅当文本因过长显示省略号时才显示Tooltip，可以通过判断元素内容是否溢出的方式实现，具体步骤如下：

1. 实现文本溢出检测方法 #

在组件类中添加一个方法，用于判断目标元素的文本是否溢出：

isTextOverflow(element: HTMLElement): boolean {
  // 当元素内容宽度超过可见宽度时，说明文本溢出（显示省略号）
  return element.scrollWidth > element.clientWidth;
}

2. 修改模板绑定Tooltip显示条件 #

给包裹文本的<div>添加模板引用变量（比如#titleText），并通过[tooltipDisabled]属性控制Tooltip是否禁用：

<ng-container matColumnDef="title">
  <th mat-header-cell *matHeaderCellDef class="table-header">
    Title
  </th>
  <td 
    pTooltip="HELLO everyone" 
    [tooltipDisabled]="!isTextOverflow(titleText.nativeElement)"
    (click)="toggleSeeMore(element)" 
    mat-cell 
    *matCellDef="let element" 
    class="title-column-news"
  >
    <!-- 添加模板引用变量 #titleText -->
    <div #titleText [style]="styleTitle(element.showSeeMore)">{{ element.title }}</div> 
    <div *ngIf="element.showSeeMore" style="margin-top: 10px">
      <span>
        <div [style]="styleTitle(element.showSeeMore)">{{ element.summary }}
          <a 
            style="color:var(--limegreen); text-decoration: none;" 
            target="_blank" 
            [href]="element.file"
          >
            See more
          </a>
        </div>
      </span>   
    </div>
  </td>
</ng-container>

3. 优化CSS确保溢出检测准确 #

确保包裹文本的容器拥有正确的溢出样式，保证scrollWidth计算准确：

.title-column-news div:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; /* 强制容器宽度占满父元素，避免宽度计算偏差 */
}

td {
  color: var(--textLightGrey);
  border-bottom: 1px solid var(--textLightGrey);
  padding: 10px 0;
  overflow: hidden;
}

4. 处理窗口Resize场景 #

当窗口大小变化时，文本的溢出状态可能改变，需要重新检测。在组件中监听窗口Resize事件，触发变更检测：

import { HostListener, ViewChildren, QueryList, ElementRef, ChangeDetectorRef } from '@angular/core';

// 组件类中添加
@ViewChildren('titleText') titleElements!: QueryList<ElementRef>;

constructor(private changeDetectorRef: ChangeDetectorRef) {}

@HostListener('window:resize')
onWindowResize() {
  // 触发Angular变更检测，更新所有行的Tooltip状态
  this.titleElements.forEach(() => {
    this.changeDetectorRef.markForCheck();
  });
}

性能提示 #

由于表格有上千行数据，建议给组件启用ChangeDetectionStrategy.OnPush，减少不必要的变更检测，提升性能：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  // ...其他配置
  changeDetection: ChangeDetectionStrategy.OnPush
})

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