Antd Table实现整行悬停展示Tooltip，解决逐单元格渲染缝隙遮挡问题

原方案问题根因 #

逐单元格单独渲染Tooltip的实现方式，存在两个固有缺陷：

• 每个单元格是独立的DOM节点，相邻单元格之间存在默认内边距缝隙，鼠标移过缝隙位置时会触发跨单元格的mouseenter/mouseleave事件，导致Tooltip频繁中断、闪烁消失
• 每个Tooltip独立渲染的层叠上下文不同，固定列、相邻单元格的DOM层级容易遮挡弹出的Tooltip内容，出现展示不完整的问题

可落地方案（无需逐单元格渲染） #

有两种经过验证的实现方式，彻底替代逐单元格包裹Tooltip的写法：

方案1（适配Antd 5.x 最新版本） #

利用Antd 5.x Table 提供的rowRender能力，直接将Tooltip包裹在整行外层：

1. 首先移除所有列render方法中包裹的Tooltip组件，将单元格内容还原为纯业务渲染逻辑，比如原有的日期列可以简化为：

   {
     title: 'Fecha de Pedido',
     dataIndex: 'fecha_pedido',
     sorter: (a, b) => moment(a.fecha_pedido).unix() - moment(b.fecha_pedido).unix(),
     render: (text, record) => moment(record.fecha_pedido).format('DD-MM-YYYY HH:mm a')
   }
   

2. 在Table组件中通过rowRender配置，将Tooltip绑定到整行的DOM节点上：

   <Table
     // 保留原有columns、dataSource、分页、排序等全部配置
     rowRender={(record, dom) => (
       <Tooltip
         title="Click para ver el detalle del pedido"
         overlayInnerStyle={{ zIndex: 1000 }}
       >
         {dom}
       </Tooltip>
     )}
   />
   

方案2（兼容Antd 4.x 全版本） #

如果使用的是Antd 4.x 版本，没有rowRender能力，可以通过自定义Table的components配置，重写表格行的渲染逻辑，将Tooltip包裹在自定义的tr节点外层：

// 自定义带Tooltip的表格行组件
const CustomRow = (props) => (
  <Tooltip
    title="Click para ver el detalle del pedido"
    overlayInnerStyle={{ zIndex: 1000 }}
  >
    <tr {...props} style={{ cursor: 'pointer' }} />
  </Tooltip>
)

// 在Table配置中注入自定义行组件
<Table
  // 保留原有columns、dataSource、分页、排序等全部配置
  components={{
    body: {
      row: CustomRow
    }
  }}
/>

方案优势 #

• 彻底解决缝隙中断问题：Tooltip的触发域是整行DOM，鼠标在整行任意区域（包括单元格间的内边距缝隙）移动时，不会触发鼠标离开行的事件，Tooltip不会出现闪烁、中断消失的问题
• 代码维护成本低：不需要逐列重复编写重复的Tooltip渲染逻辑，后续调整提示文案只需要修改行级的Tooltip配置即可
• 层叠可控：可以统一配置Tooltip的弹出层级，完全避免被相邻单元格、固定列的层叠上下文遮挡的问题
• 支持动态提示内容：不管是rowRender还是自定义行组件，都可以在Tooltip的title中，根据当前行的record动态拼接不同的提示内容，适配不同业务场景

注意：如果需要给特定列保留独立的单元格级Tooltip，只需要在对应列的render中单独渲染即可，和整行的Tooltip触发逻辑不会产生冲突。

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