如何使表格标题工具提示与启用的排序一起工作？

Question

以下是代码（live codesandbox）：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Tooltip } from "antd";

const columns = [
  {
    title: <Tooltip title="Address">A</Tooltip>,
    dataIndex: "address",
    sorter: (a, b) => a.address.length - b.address.length,
    render: cell => <Tooltip title={cell}>{cell[0]}</Tooltip>
  }
];

const data = [
  {
    key: "1",
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    address: "London No. 2 Lake Park"
  }
];

ReactDOM.render(
  <Table columns={columns} dataSource={data} />,
  document.getElementById("container")
);

当我悬停表格标题时，它显示普通的工具提示，而不显示antd Tooltip：

但是在禁用sorter后，工具提示会正确显示：

如何使Tooltip和sorter一起工作？

Answer 1

看起来像sorter applies ant-table-column-sorters的css类，导致css与Tooltip重叠。

一种解决此问题的方法很可能是：将title作为函数应用，并覆盖CSS：

const columns = [
  {
    title: () => <Tooltip title="Address">A</Tooltip>, // note it's func

    // apply custom css class, so we can track it
    className: "sorter-no-tooltip",

    dataIndex: "address",
    sorter: (a, b) => a.address.length - b.address.length,
    render: cell => <Tooltip title={cell}>{cell[0]}</Tooltip>
  }
];

和index.css中的

：

.sorter-no-tooltip .ant-table-column-sorters:before {
    content: none !important;
}

实际上，这看起来像是框架问题，所以could be submitted。

Answer 2

Antd 现在支持隐藏分类器工具提示的属性。

showSorterTooltip

整个表或列级别支持此选项。

Answer 3

此问题已修复，可以将版本更新到3.12.2。并应用标题作为功能： title：（）=>（您的ReactNode）