score:8

Accepted answer

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

enter image description here

score:0

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

score:1

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

Related Query

More Query from same tag