How to Change the color of TooltipIcon?

[zbeedatm]

What package(s) are you using?

• carbon-components
• carbon-components-react

Summary

I want to change the color of a tooltip icon, tried to add the following to my css and use it but it didn't work:

.White {
fill: white;
color: white;
}

.bx--tooltip-icon svg {
fill: white;
}

Relevant information

Sandbox: https://codesandbox.io/s/codesandbox-s4osh

[emyarod]

it looks like we can modify the tooltip styles to be less specific. as a workaround you can increase the specificity of your selector (i.e. .White path, .White polygon, .White circle, .bx--tooltip-icon path, etc)

[zbeedatm]

didn't help! (tried: path, circle, ...)
If I disable the carbon css, this line:
@import url("https://unpkg.com/carbon-components/css/carbon-components.min.css");

it's displayed as white.

[asudoh]

Seems that the CodeSandbox link yields an error. Would you want to fix the CodeSandbox link?

[zbeedatm]

I don't see any error! Please try again or use this one:
https://codesandbox.io/s/reverent-firefly-pyc03 instead

[asudoh]

Seems that you reused a single CodeSandbox link for your multiple issues. Probably that's where the problems around reproducibility came from? https://codesandbox.io/s/reverent-firefly-pyc03 doesn't seems to show a tool bar. Would you want to further reduce the case?

[zbeedatm]

https://codesandbox.io/s/reverent-firefly-pyc03 does include a toolbar with ToolTip icons that the color change is not taking affect:

[emyarod]

it doesn't look like your CSS selectors are targeting the icons that your arrows are pointing at in your illustration

[zbeedatm]

Can you please explain what do you mean with "Not Targeting"?!

I tried using my customized css class:

'< Help24 className="White" />'

.White{
fill: white;
color: white;
}

and in addetion I added to my css the base icon css :

.rendered-icon svg {
fill: white;
}

.bx--tooltip-icon path {
fill: white;
}

Why it's working for:

< UserAvatar24 className="White" />

which is not surrounded with TooltipIcon?
The problem is when the icon is part of TooltipIcon tag!!!

[emyarod]

I think I was viewing your older link because the class names did not match up. it seems the selector is not high enough specificity in your latest link, which I believe you can work around with .bx--tooltip__trigger .White path for now

#3649 will reduce the specificity and make this easier to address

[zbeedatm]

Thanks for your help.
I managed with the TooltipIcon (the help icon) as you suggested but not with the Tooltip (the notification warning icon)!
I still need your advice with that one....