首页 > 解决方案 > Antd v3 在 Tooltip 上更改插入符号颜色

问题描述

有人知道如何在 Antd v3 上自定义 Tooltip 的插入符号吗?

在文档https://3x.ant.design/components/tooltip/上,只有用于放置的 API,但没有用于插入符号样式的 API,只有工具提示本身的样式。

我知道箭头的类是.ant-tooltip-arrow,我可以更改箭头的背景,但不能更改插入符号的颜色。我尝试使用border, colorbackground但没有任何效果(目前是黑色,红色方块内的那个箭头是背景):

在此处输入图像描述

带有类的 div 的“计算”样式ant-tooltip-arrow是这样的:

background-attachment scroll
background-clip border-box
background-color rgb(255, 0, 0)
background-image none
background-origin padding-box
background-position-x 0%
background-position-y 0%
background-repeat-x
background-repeat-y
background-size auto
border-top-color rgb(173, 255, 47)
border-top-style none
border-top-width 0px
bottom -5.07107px
box-sizing border-box
color rgb(255, 255, 255)
white .ant-tooltip-arrow
rgba(0, 0, 0, 0.65) .ant-tooltip
#212529 body
#212529 body
rgba(0, 0, 0, 0.65) body
display block
font-family BogleWeb-Regular, serif
font-feature-settings "tnum", "tnum"
font-size 14px
14px !important .ant-tooltip-arrow
14px .ant-tooltip
1rem body
0.88rem !important body
1rem body
14px body
font-variant-caps normal
font-variant-east-asian normal
font-variant-ligatures normal
font-variant-numeric tabular-nums
font-weight 400
height 13.0711px
left 13px
letter-spacing normal
line-height 21px
list-style-image none
list-style-position outside
list-style-type none
overflow-x hidden
overflow-y hidden
pointer-events none
position absolute
text-align left
text-size-adjust 100%
visibility visible
width 13.0711px
-webkit-tap-highlight-color rgba(0, 0, 0, 0)

在此处输入图像描述

标签: tooltipantd

解决方案


与之前:

.ant-tooltip-arrow::before {
  background-color: red;
  color: white;
  // etc
}

推荐阅读