ReactTable7 在悬停 <th> 元素时带有简单的工具提示

Question

TL/DR：想要使用react-table（带钩子的v7）悬停标题时显示工具提示。

我正在尝试使用新的 ReactTable 库为在 React 中创建的表创建一个简单的工具提示。我不知道如何将 ReactTable 导入 Stackoverflow 代码片段，但这里是该库的 npm 页面中示例表的分叉版本。我正在尝试修改此表以获得正确的工具提示标题。在此代码沙箱中，在创建数组App.js的位置columns，我已将以下tipText键添加到列中：

const columns = React.useMemo(
  () => [
    {
      Header: 'Name',
      columns: [
        {
          Header: 'First Name',
          accessor: 'firstName',
          tipText: 'Text for the First Name tooltip'
        },
        {
          Header: 'Last Name',
          accessor: 'lastName',
          tipText: 'Text for the Last Name tooltip'
        },
      ],
    },{
      ...

...这样我就可以tipText在渲染表格时使用来显示工具提示。我还更改了<thead>元素渲染，以包含 的类th以及要显示的工具提示的跨度：

<thead>
  {headerGroups.map(headerGroup => (
    <tr {...headerGroup.getHeaderGroupProps()}>
      {headerGroup.headers.map(column => (
        <th 
          className='new-tooltip' // added a new class
          {...column.getHeaderProps()}>{column.render('Header')}
          <span>Tooltip Text</span> // and a span for the tooltip (with the wrong text)
        </th>
      ))}
    </tr>
  ))}
</thead>

我还添加了额外的 CSS 样式，以使跨度在悬停时显示。进行这些更改确实会显示工具提示，但它的位置不正确，并且没有正确显示的文本。我的两个问题是：

1：如何将 传递tipText到渲染中，以便在工具提示中渲染正确的文本？

2：如何定位工具提示，使其显示在正确的位置（在其相关<th>元素之上）

谢谢！

编辑：如果有人有任何 stackoverflow 帖子的链接，该链接成功呈现了显示 React-table v7 中的表格的代码片段，请分享，因为如果可能的话，我想用非代码沙箱工作示例更新这篇文章

Answer 1

1. 您可以简单地渲染动态跨度

{headerGroup.headers[index].tipText && (
    <span>{headerGroup.headers[index].tipText}</span>
)}

2. 你需要做出td定位relative

td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;
      position: relative; //<---here

      :last-child {
        border-right: 0;
      }
    }

代码的工作副本