How to change the text color and background color of ant-tooltip component

Question

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.

Regicide

Can you please add a jsfiddle for this, so that I can inspect... – Puppetry

the example you can see from this link ant.design/components/tooltip/#header – Regicide

Answer 1

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

Bellicose

that triangle is also getting that light color, you can see it by changing background color of your body to dark color, it may not be visible properly because there is no shadow to it like tooltip, even if you tried to add shadow to triangle it will look as square so better use different color – Bellicose

It does not work for the arrow but using : .ant-tooltip-arrow::before { background-color: white; } It fixes the arrow color – Blueness

Also add !important to color and backgroundColor to make sure it works. – Palladin

May I change className of the tooltip hint? (not the tooltip button / text / div) This is necessary in case I want to have different styles on different tooltips... – Chondrule

Answer 2

I hope this can useful for you. In order to change the color of the ant tooltip arrow use:

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

Rotl

Answer 3

In order to change the color of the arrow use this:

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

because it stays as black even when changing the background color of the tooltip and apparently this line of code didn't work for me in 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;
    }

Eckhart

Answer 4

overlayInnerStyle={{color: '#000'}}

<Tooltip title={value} color="white" overlayInnerStyle={{color: '#000'}}>

Twicetold

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Rhombic

Answer 5

Wrap the title with a div element, then use the style attribute to change the color, and the color attribute to change the background. (I know. It's annoying!)

For example, this tooltip should have a red background and a white text.

const backgroundColor = "red";
const textColor = "white";

<Tooltip
  color={backgroundColor}
  title={<div style={{ color: textColor }}>{text}</div>}
 >
  Show Tooltip
</Tooltip>

Minstrelsy

Answer 6

For somebody's looking for a theme setting solution, the color of a tooltip could be set on a theme with colorTextLightSolid token

Endeavor