如何将Tooltip对齐到Antd表格的排序图标上方？

默认的showSorterTooltip是绑定在整个表头单元格上的，所以无法直接对齐到排序图标上方，你可以通过自定义表头渲染的方式，把Tooltip直接绑定在排序图标上，实现精准对齐：

实现步骤 #

1. 导入所需组件：

import { Table, Tooltip, SortOutlined, SortAscendOutlined, SortDescendOutlined } from 'antd';

2. 在日期列的配置中，替换showSorterTooltip，改用renderHeader自定义表头：

const columns = [
  {
    title: '日期',
    dataIndex: 'date',
    sorter: (a, b) => new Date(a.date) - new Date(b.date),
    // 自定义表头，将Tooltip绑定到排序图标所在元素
    renderHeader: (_, { sortOrder }) => {
      // 根据排序状态切换对应图标
      const sortIcon = sortOrder === 'ascend' 
        ? <SortAscendOutlined /> 
        : sortOrder === 'descend' 
          ? <SortDescendOutlined /> 
          : <SortOutlined />;

      return (
        <Tooltip 
          title="点击排序" 
          placement="top" 
          arrowPointAtCenter
        >
          <span>
            日期 {sortIcon}
          </span>
        </Tooltip>
      );
    },
  },
  // 其他列配置...
];

说明 #

• 这种方式下，Tooltip的定位基准是包含排序图标的<span>元素，设置placement="top"就能让Tooltip精准出现在图标正上方。
• 保留了Antd默认的排序状态图标切换逻辑，排序时会自动显示升序/降序图标。
• 如果不需要动态切换图标，直接用<SortOutlined />即可，简化代码。

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