如何在Angular中让AG Grid工具提示保持可见直至鼠标移动

AG Grid 24.1默认的tooltip确实内置了10秒自动隐藏的超时逻辑，要实现"tooltip保持可见直到鼠标移动/离开"，最可靠的方案是通过自定义Tooltip组件完全控制显示隐藏逻辑，具体步骤如下：

1. 创建自定义Tooltip Angular组件 #

实现AG Grid的ITooltipAngularComp接口，自行管理tooltip的生命周期：

import { Component, HostListener } from '@angular/core';
import { ITooltipAngularComp } from 'ag-grid-angular';

@Component({
  template: `
    <div class="custom-tooltip">
      {{ displayContent }}
    </div>
  `,
  styles: [`
    .custom-tooltip {
      padding: 8px 12px;
      background-color: #333;
      color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
  `]
})
export class CustomTooltipComponent implements ITooltipAngularComp {
  public params: any;
  public displayContent: string;

  agInit(params: any): void {
    this.params = params;
    this.displayContent = params.value; // 从单元格数据获取tooltip内容，可按需调整
  }

  // 监听鼠标在tooltip上的移动，确保tooltip保持激活状态
  @HostListener('mousemove')
  onTooltipMouseMove() {
    // 阻止AG Grid的自动隐藏逻辑触发
    if (this.params.hideTooltip) {
      // 这里可以通过重置内部状态保持tooltip显示
    }
  }

  // 鼠标离开tooltip时主动隐藏
  @HostListener('mouseleave')
  onTooltipMouseLeave() {
    this.params.hideTooltip();
  }
}

2. 在AG Grid配置中注册并使用自定义Tooltip #

在你的表格组件中，配置frameworkComponents和列定义，指定使用自定义tooltip：

import { Component } from '@angular/core';
import { CustomTooltipComponent } from './custom-tooltip.component';

@Component({
  selector: 'app-data-grid',
  template: `<ag-grid-angular
    [rowData]="gridData"
    [columnDefs]="columnDefinitions"
    [frameworkComponents]="frameworkComponents"
    [tooltipShowDelay]="0"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>`
})
export class DataGridComponent {
  gridData = [/* 你的业务数据 */];
  frameworkComponents = {
    customTooltip: CustomTooltipComponent
  };
  columnDefinitions = [
    {
      headerName: '产品名称',
      field: 'productName',
      tooltipComponent: 'customTooltip', // 绑定自定义tooltip组件
      tooltipComponentParams: {
        // 可选：传递额外参数到tooltip组件
      }
    }
  ];

  onGridReady(params: any) {
    params.api.sizeColumnsToFit();
  }
}

3. 核心逻辑说明 #

• 自定义组件完全绕过了AG Grid内置的10秒超时逻辑，tooltip的显示隐藏完全由鼠标事件控制：
  • 鼠标进入单元格时，AG Grid触发tooltip显示；
  • 只要鼠标停留在单元格或tooltip区域，tooltip持续可见；
  • 鼠标离开单元格或tooltip时，调用params.hideTooltip()主动隐藏。

变通方案（依赖内部API，不推荐） #

如果不想自定义组件，可尝试修改AG Grid内部的tooltip超时配置，但该方法依赖版本内部实现，升级后可能失效：

onGridReady(params: any) {
  const tooltipManager = params.api.gridOptionsWrapper.gridOptions.api.tooltipManager;
  if (tooltipManager) {
    // 将默认超时设为无穷大，禁用自动隐藏
    tooltipManager.defaultHideDelay = Infinity;
  }
}

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