I implemented antd tooltip but need to change the background color and text color of it but I am unable to achieve that. I tried to do using "overlayStyle" provided by antd tooltip component but no luck not working as expected. As Shown below.
<Tooltip
title={jobNumber * 3}
placement="bottomRight"
overlayStyle={{
color: "orange",
background: "blue",
}}
>
<div style={{ maxWidth: `${jobNumber * 3}px` }} />
</Tooltip>;
I tried inspecting it but unable to do so as its work on hover and till the time I move my cursor to class but no help.
What I founded on hover the div added one class named 'ant-tooltip-open' but what's that in the class I can't see.
You can do this easily, see below code
.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;
}
here is working demo https://codepen.io/anon/pen/JVvyGr