slmgc / react-hint

Tooltip component for React, Preact, Inferno
https://react-hint.js.org/
MIT License
335 stars 28 forks source link

[Feature-request] Fade out animation on leave #34

Open capi1O opened 5 years ago

capi1O commented 5 years ago

Currently it is not possible AFAIK to add a CSS animation which triggers once the element that toggle react-hint is hovered out.

We can use delay={{ hide: someDelay }} props but then the react-hint is removed from DOM after specified delay when state.target is emptied, thus no animation can be shown.

An option to allow fadeOut on leave would be to add a class once triggering element is hovered out (ex. .react-hint--hide) and use this class to set a fadeout animation similar to the CSS animation fadeIn. This fadeOut could complete as long as the animation-delay (0.5s by default on the fadeIn anim) is smaller than the hide delay set in delay props.