React表格中ReactTooltip显示为新单元格而非悬浮提示的问题

在React项目的表格中，尝试给<td>内元素添加ReactTooltip悬浮提示时，Tooltip未在鼠标悬浮时触发显示，反而被渲染成了一个新的<td>单元格。

相关代码：

import {Tooltip as ReactTooltip} from "react-tooltip";

<div className='card-body py-3'>
    <div className='table-responsive'>
       <table className='table table-row-bordered table-row-gray-100 align-middle gs-0 gy-3'>
           <thead>
              <tr className='fw-bolder text-muted'>
                 <th className='min-w-120px' >Case id</th>
              </tr>
            </thead>
            <tbody>
               {dataArray && dataArray.map((item, index) => (
                  <tr key={index}>
                            <td>
                                <span id={`tooltip-${item.card_number}`} className='text-dark fw-bolder text-hover-primary fs-6 text-break'>{item.case_id.slice(0, 10)}</span>
                            </td>
                            <ReactTooltip
                                anchorId={`tooltip-${item.card_number}`}
                                place="bottom"
                                variant="info"
                                content="I'm a info tooltip"
                            />
                  </tr>
                ))}
             </tbody>
         </table>
     </div>
 </div>

问题表现如图所示：

问题根源是ReactTooltip被直接放在了<tr>标签下——表格的<tr>只允许<td>/<th>作为直接子元素，浏览器会将无效的子元素自动解析为新单元格。

按以下步骤修正：

• 将ReactTooltip移动到对应<td>内部，和锚点元素同级：

  <tr key={index}>
      <td>
          <span id={`tooltip-${item.card_number}`} className='text-dark fw-bolder text-hover-primary fs-6 text-break'>{item.case_id.slice(0, 10)}</span>
          <ReactTooltip
              anchorId={`tooltip-${item.card_number}`}
              place="bottom"
              variant="info"
              content="I'm a info tooltip"
          />
      </td>
  </tr>
  

• 确保引入了ReactTooltip的样式文件（v5+版本需要单独导入）：

  import "react-tooltip/dist/react-tooltip.css";
  

调整后，ReactTooltip就会作为悬浮提示正常触发，而不会被解析成表格单元格。

内容的提问来源于stack exchange，提问作者Frederik Nielsen