先看效果:
1、业务场景
如上图,有的时候根据业务需要,一定要修改一下tooltip的背景色或者样式,就需要用到以下代码来修改了。
.ant-tooltip-inner是文字框的背景色,.ant-tooltip-arrow-content是文字框下面的小三角形,如果不需要三角形,display none就好了。我们可以利用原生的改出来一些我们想要的效果。
2、全局改的css样式
写在global.less里的
.ant-tooltip-inner {color: #fff;background-color: var(--ant-primary-color);box-shadow: 0 3px 6px -4px var(--ant-primary-color);}.ant-tooltip-arrow-content {--antd-arrow-background-color: var(--ant-primary-color) !important;}
3、非全局修改
在tootip里添加overlayClassName即可单独为当前元素添加类而不影响全局样式。
写在global.less里的
4、tooltip改造
有了可以为tooltip添加类名的机会,那里面的内容就很好规划了,自定义的设计都可以实现出来。