Show Tooltip in Table cells with Ellipsis: Ant Desing

Question

I use the Ant Design library to render the Table and Tooltip components. If you specify in the table column settings:

ellipsis: {
    showTitle: false,
},

render: (value) => (
    <Tooltip placement="top" title={value}>
        <span>{value}</span>
    </Tooltip>
),

Then when you hover over a table cell, the tooltip will be displayed.

Open an image with an example

How do I make the tooltip display only if there are ellipses? If there are no ellipses, then the tooltip is not displayed.

I tried using useState, but it works perfectly for only one html element, and I have a lot of them.

Answer 1

Please use Typography.Text to add tooltip only when ellipsis is found in antd. The antd codesandbox is pretty self explanatory.

For a similar requirement, I added style changes to antd default tooltip and used Typography.Text for conditional display.

But if you require the antd Tooltip component itself, please refer first answer. Worked for me for antd table component in a project with an older version of antd, where Typography.text did not have the tooltip along with ellipsis.