Add animations for tooltip

[RG100-EMUX]

Good day! I want to add animations for show tooltip (fadeIn, fadeOut), i sending a className prop and this class add animation for opacity, but it's not work! How can I add animations?

[bel0v]

Yes, I also found the ability to add className quite useless if not adding !important all over the place. Also, it'd be really nice to be able to add animations.

[RG100-EMUX]

@FoxWhite it's will be nice.

[webchaz]

Any updates on this one if it's possible to modify the animation?

[PaulRBerg]

Is this possible in a newer version? The fade out animation is rather abrupt right now.

[zackypick]

.__react_component_tooltip { transition: all 0.3s ease-in-out !important; opacity: 0 !important; visibility: visible; }

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

[karashiiro]

Had some weirdness with the above snippet (the tooltip teleports on the first hover, slides in horizontally on the second, and then works fine); all that seems to be necessary is:

.__react_component_tooltip {
	transition: opacity 0.3s ease-in-out !important;
	visibility: visible;
}

[jveens]

The fix above posted by @zackypick worked for me, but transitioning all properties did give a similar bug as described by @karashiiro. I am doing some custom positioning so that's probably come into play. The fix for me was to animate opacity and visibility instead of all.

.__react_component_tooltip {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-out !important;
  opacity: 0 !important;
  visibility: visible;
}

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

[Johnrobmiller]

The fix above posted by @zackypick worked for me, but transitioning all properties did give a similar bug as described by @karashiiro. I am doing some custom positioning so that's probably come into play. The fix for me was to animate opacity and visibility instead of all.

.__react_component_tooltip {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-out !important;
  opacity: 0 !important;
  visibility: visible;
}

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

Is this possible with Next.js?