如何在ag网格中创建交互式工具提示？

Question

我想在 AG-grid 中添加指向自定义工具提示组件的链接，但在我单击它之前工具提示就消失了。参见示例 plnkr

文档没有提供解决方案

自定义工具提示：

import React, { useMemo } from 'react';

export default (props) => {
  const data = useMemo(
    () => props.api.getDisplayedRowAtIndex(props.rowIndex).data,
    []
  );

  return (
    <div
      className="custom-tooltip"
      style={{ backgroundColor: props.color || 'white' }}
    >
      <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>
  );
};

Answer 1

不确定您最近是否浏览过网页，但根据 Ag-Grid V30+，他们添加了与交互式自定义工具提示相关的新功能。

https://www.ag-grid.com/angular-data-grid/component-tooltip/#interactive-custom-tooltips