Как заставить всплывающую подсказку заголовка таблицы работать с включенной сортировкой?

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

Эта проблема исправлена, вы можете обновить версию до 3.12.2.И примените title как функцию: title: () => (ваш ReactNode),

Answer 2

Похоже, sorter применяет ant-table-column-sorters класс css, что заставляет css перекрывать Tooltip.

Хакерский способ исправить это могbe: применить заголовок как функцию и переопределить 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;
}

На самом деле это похоже на проблему с фреймворком, поэтому можетбыть представлен .