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

Question

TL/DR: 想在悬停时显示工具提示 headers 使用 react-table（带挂钩的 v7）。

我正在尝试使用新的 ReactTable 库为在 React 中创建的 table 创建一个简单的工具提示。我不知道如何将 ReactTable 导入 Whosebug 代码片段，但是 here is a forked version 来自库的 npm 页面的示例 table。我正在尝试修改此 table 以获得正确的工具提示 headers。在此代码沙箱中，在创建 columns 数组的 App.js 中，我已将以下 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'
        },
      ],
    },{
      ...

...这样我就可以在渲染 Table 时使用 tipText 来显示工具提示。我也更改了 <thead> 元素渲染，为 th 包含一个 class，以及一个用于显示工具提示的跨度：

<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> 元素上方）

谢谢！

编辑： 如果有人 link 任何 Whosebug post 成功呈现代码片段显示 table 来自 react-table v7，请分享，因为如果可能的话，我想用 non-code-sandbox 工作示例更新此 post

Answer 1

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

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

您需要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;
      }
    }

您的代码的工作副本

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

ReactTable7 with simple tooltip when hovering <th> elements

javascript

tooltip

reactjs

react-table

react-hooks