如何在AG Grid中创建可交互工具提示？解决点击链接前消失问题

问题根源是AG Grid默认Tooltip会在鼠标离开单元格时立即隐藏，导致还没点击到Tooltip内的链接就消失了。以下是具体解决步骤：

1. 修复Tooltip组件的数据获取逻辑并添加事件控制 #

原代码中useMemo依赖项为空会导致数据无法随行索引更新，同时新增鼠标事件控制Tooltip显示状态：

import React, { useMemo } from 'react';

export default (props) => {
  // 加入正确依赖项，确保数据实时更新
  const data = useMemo(
    () => props.api.getDisplayedRowAtIndex(props.rowIndex).data,
    [props.rowIndex, props.api]
  );

  // 鼠标进入Tooltip时，强制保持显示
  const handleTooltipMouseEnter = () => {
    props.api.showTooltip({
      rowIndex: props.rowIndex,
      column: props.column,
    });
  };

  // 鼠标离开Tooltip时，关闭Tooltip
  const handleTooltipMouseLeave = () => {
    props.api.hideTooltip();
  };

  return (
    <div
      className="custom-tooltip"
      style={{ backgroundColor: props.color || 'white' }}
      onMouseEnter={handleTooltipMouseEnter}
      onMouseLeave={handleTooltipMouseLeave}
    >
      <p>
        <span>{data.athlete}</span>
      </p>
      <p>
        <span>Country: </span> {data.country}
      </p>
      <div>
        <a href="https://www.ag-grid.com/react-data-grid/component-tooltip/">
          ag grid component tooltip
        </a>
      </div>
      
      <p>
        <span>Total: </span> {data.total}
      </p>
    </div>
  );
};

2. 调整AG Grid的Tooltip配置 #

在Grid配置中设置延迟参数，避免鼠标从单元格移到Tooltip时出现闪烁：

const gridOptions = {
  // 其他原有配置...
  tooltipShowDelay: 0,
  tooltipHideDelay: 200, // 给鼠标移动到Tooltip预留缓冲时间
  tooltipComponent: CustomTooltip,
};

原理说明：

• tooltipHideDelay设置200ms延迟，确保鼠标有足够时间从单元格移到Tooltip区域，不会立即隐藏。
• 鼠标进入Tooltip时调用showTooltip强制保持显示，离开时调用hideTooltip关闭，保证链接可正常点击。

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