reactjs - 如何使表头工具提示与启用的排序一起使用？

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。

解决此问题的一种 hacky 方法可能是:将标题作为函数应用，并覆盖 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 .