antd table 使用的列使用 ellipsis: true 自动省略属性 + Tooltip 导致位置弹窗错位

antd table 使用的列使用 ellipsis: true 自动省略属性 + Tooltip 导致位置弹窗错位

复现示例

具体现象

1. 使用 antd 的 table 的 ellipsis: true 实现自动省略
2. 展示内容由于被省略需要通过 tooltip 查看全部
3. tooltip 并不在对应列的统一位置上，而是根据长度不同位置不同，导致出现在其他列上的现象

问题原因

使用 ellipsis: true 时，列中 span 的宽度为实际宽度只是视觉上进行的省略操作，导致 tooltip 按照上述宽度进行居中显示判断，造成显示在其他列的结果

解决办法

1. 将 tooltip 展示更改为居左，即设置 placement="topLeft" 可以保证 tooltip 在于其位置，不会错位到其他类
2. tooltip 中使用 div 包裹（不能是span），并自行实现超长自动省略样式，具体如下：

// 超长自动省略样式
const ellipsisStyle = {
	overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    width: '150px',
}
// 使用 ellipsis: true 写法
{
    title: "姓名",
    dataIndex: "name",
    ellipsis: true,
    width: 200,
    render: (name) => <Tooltip title={name}>{name}</Tooltip>
},
// 使用 div 自行实现省略样式
{
    title: "姓名",
    dataIndex: "name",
    ellipsis: true,
    width: 200,
    render: (name) => <Tooltip title={name}><div style={ellipsisStyle}>{name}</div></Tooltip>
},

使用 方法2 对应列宽度如上图所示，可以保证 tooltip 不会错位