Tooltip shows artifact when title changes to empty string

For a very short period, the tooltip will show even when empty. If arrow was used it looks extra awkward.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When tooltip title is set to empty (via state change) while showing it will be visible for a short period without text.

Expected Behavior 🤔

Setting tooltip title to empty show hide tooltip immediately.

Steps to Reproduce 🕹

This simple codesandbox explains it best: https://codesandbox.io/s/zen-bell-iyxb5?file=/src/App.js

Context 🔦

I want to hide the tooltip as soon as a button was pressed. Instead of removing the <Tooltip> wrapping it is much simpler to set the text as empty but it causes a slight artifact.

Your Environment 🌎

Tech	Version
Material-UI	v5.0.0-alpha.9
React	v16.13.1
Browser	Chrome 85.0.4183.102

[oliviertassinari]

@holmberd Interesting. I can definitely observe the behavior. By hiding the children, the popper does no longer know where to show the tooltip. It fallbacks to the (0, 0) position. Conditional rendering sounds like a great solution, it should yield better performance too 😃.

[holmberd]

@oliviertassinari https://codesandbox.io/s/create-react-app-template-forked-o9lzk?file=/index.js

Note: Conditional rendering is a valid work-around.