antd修改Tooltip背景色

Tooltip默认背景色是黑色,字体是白色。
antd修改Tooltip背景色
我想变成如下图效果:黑字,白色背景。
antd修改Tooltip背景色
官网文档:https://ant.design/components/tooltip-cn/
antd修改Tooltip背景色
根据titlecolor属性我们可以实现黑字白底的功能。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>
  );
上一篇:vue element Tooltip套用Popover


下一篇:echarts 折线图tooltip显示多个信息