Tooltip "Double" opens when triggered

[BlueVajra]

You can see an example on the examples page: http://react-component.github.io/tooltip/examples/onVisibleChange.html

When you click on the "trigger" it render's twice very quickly

Mac Chrome: Version 63.0.3239.132

[BlueVajra]

So I tried digging into this issue and found that the base class for the tooltip has an opacity of 0.9. so there is a "flash" of the tooltip when it is made visible and before it gets the opacity: 0 from &-zoom-appear

the simple solution is removing the opacity from the root component and letting the animation control the opacity. I am unsure of any downstream issues with this.

[moonray]

Same issue. However, removing opacity or setting it to 0 hides the tooltip when it's supposed to be visible, after the animation completes, when a popup container is set.

EDIT: never mind, that only seems to be an issue if overriding the opacity in the cascade.

[eyaldouwma]

can you maybe share the code that fixed this issue? i am struggling with this. thanks :)

[tony]

@BlueVajra @moonray Hi there! Can either of you show an example of what you mean?

[benyaminbeyzaie]

Please checkout the code and let me know if this PR solves your problem.

[davidjb]

Removing the opacity from the base tooltip class (e.g. .rc-tooltip) solves this issue. However, for folks who can't modify the base CSS directly (use as an NPM module etc), you can either unset the property with:

.rc-tooltip {
  opacity: unset;
}

if you're able to define this rule after the base CSS. Alternatively, if you don't know or can't control the ordering of your CSS, then:

.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-prepare,
.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-start,
.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-start {
  opacity: 0
}

will covers all the states where the tooltip flashes and appears ahead of the given animation starting, taking precedence as they're more specific than the base class.