Search code examples
reactjsmaterial-uitooltip

MaterialUI Tooltip fade when display= none

I use materialUI ToolTip for my reactjs project. When block from style display: block to style display: none, tooltip in that block is fading very fast before disappear.

Here is my example: https://codesandbox.io/s/fade-block-tooltip-ui-lb51f

My problem in codesanbox example: When I click button "Click me", pink block will display: none and tooltip fade very fast before dissapear.

Thank you for your help.

Solution

  • left all the same as it is now but wrap your tooltip inside the ternary:

    https://codesandbox.io/s/fade-block-tooltip-ui-forked-sphxl?file=/src/App.js

    UPD: if you need this inside your DOM that better to play with tooltip styles by themself not just add display: none to parent because tooltip have an animation for hiding and showing that take some time to hide