Tooltip默认背景色是黑色,字体是白色。
我想变成如下图效果:黑字,白色背景。
官网文档:https://ant.design/components/tooltip-cn/
根据title和color属性我们可以实现黑字白底的功能。color可以修改背景色为白色,title返回的是jsx,我们可以在jsx中设置title字体的颜色。代码如下。
代码
import { Table, Tooltip, Typography } from 'antd';
const { Text } = Typography;
const columns =[
{
title: 'Tooltip黑字白色背景',
dataIndex: 'text',
key: 'text',
width: 150,
render: (text: any) => {
return <Tooltip
title={tip(text)}
color={'#fff'}
key={'#fff'}
>
<Text ellipsis style={{width: '140px'}}>
{content}
</Text>
</Tooltip>
},
},
];
const tip = (text: any) => (
<div>
<span style={{ color: '#000' }}>{text || ''}</span>
</div>
);