🧐[问题]表格的sorter和tooltip同时设置时，两个tooltip会重叠

[Gaocarri]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🧐 问题描述

如官方示例所示，悬浮创建时间旁边的提示icon，“这是一段描述”和“点击排序”两个tooltip重叠在了一起，有什么办法可以在点击提示icon时，不展示排序的tooltip吗

🚑 其他信息

[dosubot[bot]]

这个问题是因为 sorter 和 tooltip 都在表头渲染了各自的 Tooltip，当两个触发元素（排序图标和提示 icon）靠得很近时，鼠标悬浮或点击会同时触发两个 Tooltip，导致重叠。Ant Design 的 Tooltip 目前没有内置机制自动避免这种重叠（参考）。

解决方法有两个思路：

1. 自定义表头渲染，分离触发区域：用 title 属性自定义表头内容，把 info icon 和排序 icon 分开渲染，分别包裹各自的 Tooltip，并通过 trigger="hover" 只允许悬浮触发 info icon 的 Tooltip，避免点击时弹出。

2. 控制 Tooltip 显示：利用 Tooltip 的 open 和 onOpenChange 属性，配合点击事件，手动控制 info icon 的 Tooltip 显示状态。例如，点击 info icon 时直接关闭 Tooltip。

示例代码：

import { Tooltip } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';

const columns = [
  {
    title: (
      <span>
        创建时间
        <Tooltip title="这是一段描述" trigger="hover">
          <InfoCircleOutlined style={{ marginLeft: 4 }} />
        </Tooltip>
      </span>
    ),
    dataIndex: 'createdAt',
    sorter: true,
    // 其他配置...
  },
  // 其他列...
];

这样 info icon 的 Tooltip 只会在悬浮时显示，点击不会弹出，能有效减少重叠。如果需要更复杂的控制，可以用 open/onOpenChange 实现手动关闭 Tooltip。

相关讨论和更多方案可以参考 Ant Design issue #53887 和 ProComponents 相关 issue。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[Gaocarri]

这个问题是因为 sorter 和 tooltip 都在表头渲染了各自的 Tooltip，当两个触发元素（排序图标和提示 icon）靠得很近时，鼠标悬浮或点击会同时触发两个 Tooltip，导致重叠。Ant Design 的 Tooltip 目前没有内置机制自动避免这种重叠（参考）。

解决方法有两个思路：

1. 自定义表头渲染，分离触发区域：用 title 属性自定义表头内容，把 info icon 和排序 icon 分开渲染，分别包裹各自的 Tooltip，并通过 trigger="hover" 只允许悬浮触发 info icon 的 Tooltip，避免点击时弹出。
2. 控制 Tooltip 显示：利用 Tooltip 的 open 和 onOpenChange 属性，配合点击事件，手动控制 info icon 的 Tooltip 显示状态。例如，点击 info icon 时直接关闭 Tooltip。

示例代码：

import { Tooltip } from 'antd'; import { InfoCircleOutlined } from '@ant-design/icons';

const columns = [ { title: ( 创建时间 <Tooltip title="这是一段描述" trigger="hover"> <InfoCircleOutlined style={{ marginLeft: 4 }} /> </Tooltip> ), dataIndex: 'createdAt', sorter: true, // 其他配置... }, // 其他列... ]; 这样 info icon 的 Tooltip 只会在悬浮时显示，点击不会弹出，能有效减少重叠。如果需要更复杂的控制，可以用 open/onOpenChange 实现手动关闭 Tooltip。

相关讨论和更多方案可以参考 Ant Design issue #53887 和 ProComponents 相关 issue。

To reply, just mention @dosu.要回复，只需提及@dosu。

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other    

我需要展示标题旁边提示的时候 让sorter不展示，这个方法不行

[dosubot[bot]]

目前 Ant Design Table/ProTable 没有内置或文档支持的方式，可以在显示标题旁边的提示（Tooltip）时，动态隐藏 sorter 图标。sorter 的渲染是由 column 的 sorter 属性决定的，无法通过 Tooltip 的显示状态来动态控制 sorter 的显示与否。

官方 issue 也确认了这一点：Tooltip 之间的重叠只能通过结构调整（比如完全自定义表头渲染、分离触发区域）来规避，无法通过 API 或 props 实现“当 info tooltip 显示时隐藏 sorter”。

如果你的需求是“只在 info icon 悬浮/显示 tooltip 时，临时隐藏 sorter”，目前只能考虑用完全自定义的表头渲染 + 受控状态，手动决定什么时候渲染 sorter 图标（比如用 useState 控制），但这需要你放弃 Table 的内置 sorter 机制，自己实现排序逻辑和 UI。

简单来说，官方和社区目前没有现成的解决方案或 API 支持你的需求，只能通过自定义渲染和状态管理实现 workaround。参考

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}