如何更改ant-tooltip组件的文本颜色和背景颜色

Question

我实现了antd工具提示，但需要更改其背景颜色和文本颜色，但无法实现。我尝试使用antd工具提示组件提供的“ overlayStyle”来做，但是没有运气不能按预期工作。如下所示。

write len(a.size())

我试图对其进行检查，但是由于它在悬停时一直无法进行检查，直到我将光标移到类上但没有帮助为止。

我在div上悬停的基础上添加了一个名为“ ant-tooltip-open”的类，但是在该类中我看不到什么。

Answer 1

您可以轻松完成此操作，请参见下面的代码

.ant-tooltip-inner {
    color: yellow;
    background-color: green;
}

.ant-tooltip-placement-bottom .ant-tooltip-arrow, .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
    border-bottom-color: green;
}

这是工作示例https://codepen.io/anon/pen/JVvyGr

Answer 2

为了更改箭头的颜色，使用此：

.ant-tooltip-arrow-content{
    background-color: #fafafa !important;
}

因为即使更改工具提示的背景颜色，它仍保持黑色，显然这行代码在Chrome中不适用于我：

.ant-tooltip-placement-bottom .ant-tooltip-arrow, .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
        border-bottom-color: green;
    }

Answer 3

我希望这对您有用。 为了更改蚂蚁工具提示箭头的颜色，请使用：

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