Material-ui: [Regression] tooltips block pointer events even when not showing

[jedwards1211]

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When a tooltip isn't showing it can't block any elements from receiving pointer events

Current Behavior

Even when the tooltip isn't showing, its div is present in the document, blocking any elements beneath it from receiving pointer events

Steps to Reproduce (for bugs)

1. Go to https://codesandbox.io/s/vqnzr43xv7
2. Hover in the middle of the "Button blocked by tooltip"
3. Notice that the button isn't clickable in the middle
4. Hover around the sides of the button -- the tooltip doesn't block it on the sides

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.2.2 |
| React | v16.4.0 |
| browser | Chrome 66.0.3359.181 |

[oliviertassinari]

I have also noticed that scrolling performance is much worse 😱, plus the increased bundle-size : #11862.
Maybe we should go back to [email protected]?

[oliviertassinari]

I'm reverting back to [email protected]. There is, what I think is a leak in react-popper@1.
Moving forward, I'm gonna take the weekend to fix all the tooltip issues in a batch.

[geirsagberg]

I think the issue with this might be that className should no longer be on Popper element, but on the <div> within?