Material-ui: Tooltip does not show when hover on MenuItem

[palaniichukdmytro]

When I hover over MenuItem component which wrapped to Toolip, Tooltip does not fire.

• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Tooltip should be shown on hover

Current Behavior

Tooltip does not show when hovering on MenuItem

Steps to Reproduce (for bugs)

https://codesandbox.io/s/9jyv058xyr

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.0.0-beta.34 |
| React | 16.2.0 |
| browser | chrome 64 |
| etc | |

[kgregory]

Clarification:

A Tooltip will not appear on a disabled MenuItem. In your reproduction case, you've added the Tooltip to your Logout MenuItem which is disabled.

It will appear for a MenuItem that is not disabled, but if there is not enough room for the tooltip, it will behave erratically.

See this codesandbox . It increases the width of the Menu to accomodate the Tooltip and everything appears to be working. Is this your expected behavior? If not, would you please elaborate?

[palaniichukdmytro]

Actually, I can show even on disable an item, just wrapped MenuItem to div, I've already solved this issue previously because tooltip populates events to the child. So you can check that it possible to show it on disabling one here https://codesandbox.io/s/6zx6j184z3
But the real problem to show tooltip from the right of the menu item, not inside or over on menu item.

[kgregory]

Okay, so it is possible to display a Tooltip on a disabled MenuItem if you wrap the entire MenuItem in a div and wrap that with a Tooltip 😄

...the real problem to show tooltip from the right of the menu item, not inside or over on menu item.

Good clarification of the issue.

[JosephJvB]

@palaniichukdmytro
Thanks for your fix with the div wrapper. I also found that the Tooltip didn't respect any placement properties you gave it.
I was also experiencing this issue https://github.com/mui-org/material-ui/issues/10735 so a quick hack I'm using to position the Tooltip is this:

<Tooltip PopperProps={{ style: { pointerEvents: 'none', marginTop: '40px' } }}>
  ...
</Tooltip>

It's not pretty but maybe it's a quick fix for now.

[oliviertassinari]

I have updated the reproduction to the latest version: https://codesandbox.io/s/926jp1qwyr.