antd3.x的Tooltip的背景色默认是黑底白字,现在需要修改成白底黑字。 antd4.x增加了color属性,但是3.x还需要自己设置。
.tooltipClass {
.ant-tooltip-inner {
color: #6ba3a4;
background-color: #fff !important;
}
// 设置箭头的颜色
.ant-tooltip-arrow::before {
background: #fff !important;
}
}
项目代码:
<Tooltip
placement="right"
overlayClassName="tooltipClass"
title="prompt text"
>
<span style={{ position: 'absolute', float: 'right', top: 11, right: 35 }}>
<img src={destIcon} alt="准" />
</span>
</Tooltip>
在全屏模式或页面布局变化后,tooltip失去正确定位的问题。通过设置getPopupContainer属性,将toolti 0绑定到特定父节点,可以确保其在页面变动时仍能找到正确位置。
如果遇到antd的Tooltip不显示的问题,修改如下:
getPopupContainer={() =>
document.getElementsByClassName('result-left-content')[0]
}