javascript - 悬停 元素时带有简单工具提示的 ReactTable7

Question

TL/DR:希望在使用 react-table(带 Hook 的 v7)悬停标题时显示工具提示。

我正在尝试使用新的 ReactTable 库为在 React 中创建的表创建一个简单的工具提示。我不知道如何将 ReactTable 导入 Stackoverflow 代码片段，但是 here is a forked version来自库的 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>
)}

1. 您需要使td位置相对

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

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

您的代码的工作副本