react项目ant design给表格title添加tooltip提示效果,效果如下:
关键代码是给需要添加提示的表头title属性用函数的方式渲染出tooltip。例如这里用了一个span元素包裹Tootip和Icon图标。
title: () => (
<span>
{'所属分类级别'}
<Tooltip
title={'分类级别分为一二三级'}
>
<Icon style={{ marginLeft: 8 }} type="question-circle" />
</Tooltip>
</span>
),
示例效果中Columns的完整代码
Columns = [
{
title: 'Id',
dataIndex: 'id',
key: 'id',
render: (id) => (id || '--')
},
{
title: '所属分类',
dataIndex: 'name',
key: 'name',
},
{
title: () => (
<span>
{'所属分类级别'}
<Tooltip
title={'分类级别分为一二三级'}
>
<Icon style={{ marginLeft: 8 }} type="question-circle" />
</Tooltip>
</span>
),
dataIndex: 'level',
key: 'level',
render: (level) => (level || '' + '级')
},
{
title: '备注',
dataIndex: 'remark',
key: 'remark',
render: (remark) => (remark || '--')
}
];