修改antd3.x的Tooltip的背景色

295 阅读1分钟

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]
    }