How to make table header tooltip work with enabled sorting?

Question

Here is the code (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")
);

When I hover table header, it shows plain tooltip instead of showing antd Tooltip:

However after disabling sorter the tooltip displays correctly:

How to make Tooltip and sorter work together?

Answer 1

Looks like sorter applies ant-table-column-sorters css class, which causes css to overlap the Tooltip.

A hacky way to fix this could be: apply title as a function, and override 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>
  }
];

and in index.css:

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

Actually it looks like an framework issue, so it could be submitted.

Answer 2

Antd now supports a property for hiding sorter tooltip.

showSorterTooltip

This option is supported for Table as a whole or at column level.