[Tooltip] stick on screen when child is disabled

• 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 😯

I’m using the Tooltip component with a button as child, which get disabled when you click on it. The tooltip stay on screen when the button is disabled. The doc says to put a span before the disabled element, but it still have the same behavior.

Expected Behavior 🤔

The tooltip disappear onMouseLeave even if the child is disabled

Steps to Reproduce 🕹

I made a small Code SandBox example of the issue: https://codesandbox.io/embed/tooltip-disable-pqess

The first example is without the <span> tag enclosing the child. The second is with the <span> tag enclosing the child. When clicking on the button, it will get disabled. The tooltip stays displayed no matter what Steps:

1. Hover the button: the tooltip get displayed (fine)
2. Leave the button: the tooltip disappears (fine)
3. Click on the button, the tooltip will still be displayed even if you leave it

Context 🔦

I’m using it to display an action button. So when you click it i fetch some data, and while fetching the button is disabled

Your Environment 🌎

Tech	Version
Material-UI	v4.3.0
React	v16.8.6
Browser	Chrome
TypeScript	v3.2.2

[oliviertassinari]

@Bixtrix What are you wrapping the tooltip with in your website? This does the trick:

<Tooltip title={text}>
  <span>
    <button
      style={ disabled ? { pointerEvents: "none" } : {}}
      disabled={disabled}
      onClick={doStuff}
    >
      {text}
    </button>
  </span>
</Tooltip>

[oliviertassinari]

@konekoya I would expect the mui buttons free from this problem. I think that a note about this limitation should be enough.