Antd v3 Tooltip 组件 caret（指示箭头）颜色自定义问题咨询

实现原理 #

Antd v3 的 Tooltip 指示箭头并非由.ant-tooltip-arrow元素本身的样式生成，而是通过该元素的::after伪元素的透明边框绘制的三角形，因此直接修改.ant-tooltip-arrow的background、border、color属性不会生效。

具体实现方案 #

方案1：全局修改所有Tooltip箭头颜色 #

直接覆盖默认样式，适配所有弹出方向的箭头：

/* 箭头在上方时 */
.ant-tooltip-placement-top .ant-tooltip-arrow::after {
  border-top-color: #自定义颜色值;
}
/* 箭头在下方时 */
.ant-tooltip-placement-bottom .ant-tooltip-arrow::after {
  border-bottom-color: #自定义颜色值;
}
/* 箭头在左侧时 */
.ant-tooltip-placement-left .ant-tooltip-arrow::after {
  border-left-color: #自定义颜色值;
}
/* 箭头在右侧时 */
.ant-tooltip-placement-right .ant-tooltip-arrow::after {
  border-right-color: #自定义颜色值;
}

方案2：仅修改指定Tooltip的箭头颜色 #

给目标Tooltip添加自定义类名，避免影响全局样式：

1. 给Tooltip组件设置overlayClassName属性：

<Tooltip 
  title="自定义样式提示"
  overlayClassName="my-custom-tooltip"
>
  <span>Hover触发提示</span>
</Tooltip>

2. 基于自定义类名写样式：

/* 仅适配上方箭头的示例，其他方向同理补充即可 */
.my-custom-tooltip.ant-tooltip-placement-top .ant-tooltip-arrow::after {
  border-top-color: #ff0000;
}

内容的提问来源于stack exchange，提问作者pmiranda