如何隐藏AG Grid列工具面板中显示的表头提示框？

针对AG Grid 27.3.0中设置headerTooltip后，列选择菜单和Filter Tool Panel的表头也会显示提示框的问题，可以通过动态判断表头所在容器的方式实现仅主网格表头显示提示。

实现步骤 #

将列定义中的静态headerTooltip替换为getHeaderTooltip回调函数，在函数内通过DOM元素判断当前表头是否属于主网格：

const columnDefs = [
  {
    field: 'athlete',
    getHeaderTooltip: (params) => {
      // 获取当前表头单元格的DOM元素
      const headerCell = params.eHeaderCell;
      // 仅当表头位于主网格的.ag-header容器内时返回提示文本
      if (headerCell.closest('.ag-header')) {
        return '运动员姓名'; // 替换为你的提示内容
      }
      // 其他面板中返回undefined，不显示提示框
      return undefined;
    }
    // 其他列配置项...
  }
  // 其他列定义...
];

原理说明 #

• 主网格的表头单元格DOM元素会被包裹在带有.ag-header类的容器内；
• Filter Tool Panel和列选择器面板的表头容器不包含.ag-header类，因此通过closest('.ag-header')可以精准区分；
• 当函数返回undefined时，AG Grid不会渲染提示框，从而实现面板表头无提示的效果。

验证效果 #

1. 悬停主网格中的表头，正常显示设置的提示框；
2. 打开Filter Tool Panel或列选择器面板，悬停其中的表头，不会显示提示框，符合预期行为。

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