AG Grid实现仅在单元格文本溢出时显示Tooltip的方案

步骤1：添加文本溢出样式 #

先确保单元格内容溢出时显示省略号，新建或修改tooltip-cell-renderer.component.scss：

.tooltip-cell-renderer {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

步骤2：修改Tooltip Cell Renderer组件 #

更新tooltip-cell-renderer.component.ts，添加文本溢出检测逻辑，控制Tooltip显示：

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-tooltip-cell-renderer',
  template: `
    <span
      #cellContent
      class="tooltip-cell-renderer"
      [ngbTooltip]="params.data.name"
      [container]="'body'"
      [disabled]="!isTextOverflow"
    >
      {{ params.data.name }}, leader of {{params.data.region}}
    </span>
  `,
  styleUrls: ['./tooltip-cell-renderer.component.scss']
})
export class TooltipCellRendererComponent implements ICellRendererAngularComp, OnInit, OnDestroy {
  params!: ICellRendererParams;
  @ViewChild('cellContent') cellContent!: ElementRef<HTMLSpanElement>;
  @ViewChild(NgbTooltip) tooltip!: NgbTooltip;
  isTextOverflow = false;

  agInit(params: ICellRendererParams): void {
    this.params = params;
  }

  ngOnInit(): void {
    this.checkTextOverflow();
    window.addEventListener('resize', this.checkTextOverflow.bind(this));
  }

  checkTextOverflow(): void {
    const element = this.cellContent.nativeElement;
    this.isTextOverflow = element.scrollWidth > element.clientWidth;
    if (this.tooltip && !this.isTextOverflow) {
      this.tooltip.close();
    }
  }

  refresh(): boolean {
    this.checkTextOverflow();
    return true;
  }

  ngOnDestroy(): void {
    window.removeEventListener('resize', this.checkTextOverflow.bind(this));
  }
}

步骤3：优化列配置 #

在app.component.ts的列定义中，显式设置文本不换行，确保溢出逻辑生效：

this.columnDefs = [
  {
    headerName: 'Name',
    field: 'name',
    cellRenderer: TooltipCellRendererComponent,
    wrapText: false,
    autoHeight: false
  },
  {
    headerName: 'Type of govt',
    field: 'govt'
  }
];

核心逻辑说明 #

• 通过scrollWidth > clientWidth判断文本是否溢出，这是原生JS检测文本溢出的可靠方式
• 用[disabled]="!isTextOverflow"控制NgbTooltip的启用状态，仅在文本溢出时允许显示
• 监听窗口resize事件，处理列宽变化导致的溢出状态变更
• 组件销毁时移除resize监听，避免内存泄漏

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