Как изменить цвет текста и цвет фона компонента всплывающей подсказки

Question

Я реализовал всплывающую подсказку, но мне нужно изменить цвет фона и цвет текста, но я не могу этого добиться. Я пытался использовать "overlayStyle", предоставляемый компонентом всплывающей подсказки antd, но, к счастью, не работал должным образом. Как показано ниже.

<Tooltip title={jobNumber * 3} placement='bottomRight' overlayStyle={{ 
color: 'orange', background: 'blue' }}>
<div style={{ maxWidth: `${jobNumber * 3}px` }} />
</Tooltip>

Я пытался осмотреть его, но не смог сделать это, так как он работал при наведении курсора и до того момента, пока я не переместил курсор в класс, но без помощи.

То, что я основал при наведении курсора, добавил один класс с именем '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