React-tooltip: Change Opacity / Transparency

[protoEvangelion]

Is there a simple way to change the opacity of the tooltip when it is shown?

I did not see a prop available for that and I've tried using inline styles and wrapping it in styled-components with no success.

Thanks :)

[huumanoid]

Shown tooltip is available via .react-tooltip.show selector. Try it.

[protoEvangelion]

Is there a way to style it inline with JS instead of CSS? Like:

<ReactTooltip style={{ opacity: 1 }}>Hello</ReactTooltip>

[huumanoid]

I'm sorry, but it's not. It's handy for jss, isn't it?

[protoEvangelion]

That would be super cool if there was an opacity prop available right on <ReactTooltip />. Loving the library so far though :) Really simple!

[leizard]

+1 for this too. In the demo the tooltip is a little transparent but when I apply the package to my project the background is not transparent anymore.

[SteveAtSentosa]

+1, would like to set success fail at opacity 1 (tried className w { opacity:1 }, but no luck

[SteveAtSentosa]

actually found that adding !important works.

opaque {
  opacity: 1 !important;
}

<ReactTooltip className='opaque`}>

[katespaghetti]

My team recently started using this and someone came up with a solution without adding !important if anyone else is trying to avoid them.

&.show { opacity: 1; }

We would still love to see @protoEvangelion's suggestion to inline.

[andrienpecson]

Try this selector:

.__react_component_tooltip.show {
  opacity: 1 !important;
}