[BUG] Tooltips no longer disappear, when opacity: 1

[ansgarsteinkamp]

Version: 5.22.0

Description: In order to be able to style the tooltips with Tailwind CSS, I use a class "classNamesTooltip", in which I set "opacity: 1". Since version 5.22.0, this results in the tooltips no longer disappearing.

[gabrieljablonski]

Setting the opacity through CSS is not supported, even before 5.22.0 it wasn't supposed to work. Use the opacity prop on the tooltip instead.

<Tooltip opacity={1} />

[EmanuelU]

I had the same issue, thanks! Solved by changing to

<Tooltip opacity={1} />

[anch09]

I got the same bug, with the latest version at the date today which is 5.22.0 the tooltips are not dissappearing when mouserleave event is triggered.

[gabrieljablonski]

@anch09, as mentioned above, this is not a bug. Have you tried using the opacity prop?

#1113 will add this more clearly to the documentation.

[anch09]

@gabrieljablonski so it's intended to work as it from the version 5.22.0? because for me it's way better how it used to be before

[gabrieljablonski]

@anch09 yes, the previous behavior was not intended. If setting the opacity through CSS is better for you, you can also try overriding --rt-opacity like this

:root {
  --rt-opacity: 1;
}

[targumon]

Setting the opacity through CSS is not supported, even before 5.22.0 it wasn't supposed to work.

Wasn't aware of that. Somehow it DID work for me.
Anyway, I switched to use the opacity={1} prop.

👍 Works fine in a real browser - thanks!
👎 But... throws in tests. I'm using react-testing-library & jest and get CSS.supports is not a function errors.

For now I just mocked the function.
In file setupTestsAfterEnv.js I added:

global.CSS.supports ||= () => true

(can probably also do it in setupTests.js - I don't remember the difference. They're both referred from jest.config.js in properties setupFilesAfterEnv & setupFiles respectively)

However, I think this line should be modified:

react-tooltip/src/components/TooltipController/TooltipController.tsx

Line 285 in 41e2ae5

if (opacity && !CSS.supports('opacity', `${opacity}`)) {

to include a check:

if (opacity && 'supports' in CSS && !CSS.supports('opacity', `${opacity}`)) {

(similar to what these guys did here: https://github.com/wojtekmaj/react-fit/pull/3/files )

LMK if you want me to open a PR and thanks again! 🙏

[gabrieljablonski]

@targumon thanks for heads up. #1117 should fix the problem with CSS.supports().