antd修改Tooltip背景色

最新推荐文章于 2024-07-06 15:11:49 发布

MYG_G

最新推荐文章于 2024-07-06 15:11:49 发布

阅读量4.2k

点赞数 2

分类专栏： antd 文章标签： antd

本文链接：https://blog.csdn.net/qq_40657321/article/details/121657982

版权

antd 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

本文档展示了如何使用Ant Design的Tooltip组件，通过设置`title`和`color`属性来实现黑色字体和白色背景的效果。通过在jsx中设置title字体颜色和调整color属性，成功创建了具有黑字白底样式的Tooltip。

摘要由CSDN通过智能技术生成

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>
  );