如何在点击agGrid单元格时显示默认tooltip？适配移动端场景

可以通过以下两种方式实现点击单元格时触发agGrid默认tooltip的显示，适配移动端场景：

方法一：利用agGrid的Tooltip实例API #

agGrid提供了getTooltipInstance和hideTooltip等API，可直接控制tooltip的显示/隐藏：

const gridOptions = {
  columnDefs: [
    {
      field: 'productName',
      tooltipField: 'productDesc' // 配置tooltip的内容字段
    }
  ],
  // 单元格点击事件
  onCellClicked: (params) => {
    // 先关闭已打开的tooltip
    params.api.hideTooltip();
    
    // 获取当前单元格的tooltip实例
    const tooltipInstance = params.api.getTooltipInstance(params.eGridCell);
    if (tooltipInstance) {
      // 手动触发tooltip显示
      tooltipInstance.show({
        event: params.event,
        api: params.api,
        column: params.column,
        value: params.value,
        rowIndex: params.rowIndex,
        node: params.node
      });
    }
  },
  // 点击表格其他区域关闭tooltip
  onBodyClicked: () => {
    gridOptions.api?.hideTooltip();
  }
};

方法二：模拟mouseenter事件触发Tooltip #

因为agGrid默认tooltip是通过mouseenter事件触发的，所以可以在点击时手动给单元格派发该事件：

const gridOptions = {
  columnDefs: [
    {
      field: 'productName',
      tooltipValueGetter: (params) => `商品详情：${params.data.productDesc}` // 自定义tooltip内容
    }
  ],
  onCellClicked: (params) => {
    const cellElement = params.eGridCell;
    
    // 派发mouseenter事件触发tooltip
    const enterEvent = new MouseEvent('mouseenter', {
      bubbles: true,
      cancelable: true,
      view: window
    });
    cellElement.dispatchEvent(enterEvent);

    // 监听页面点击，点击其他区域关闭tooltip
    const closeTooltip = () => {
      const leaveEvent = new MouseEvent('mouseleave', {
        bubbles: true,
        cancelable: true,
        view: window
      });
      cellElement.dispatchEvent(leaveEvent);
      document.body.removeEventListener('click', closeTooltip);
    };
    document.body.addEventListener('click', closeTooltip);
  }
};

注意事项 #

• 确保agGrid未禁用tooltip功能（默认enableTooltips: true，无需额外配置）；
• 移动端可结合onCellTouchStart事件替代onCellClicked，提升触摸体验；
• 注意处理tooltip的关闭逻辑，避免出现多个tooltip叠加显示的情况。

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