Material-ui: [Tooltip] Flickers when overlaped with element it is attached to

[freund17]

Sometimes tooltips overlap with the element they are attached to.
This causes flickering when moving the mouse-cursor. (Because the cursor is sometimes detected moving over the attached element -- showing the tooltip -- and sometimes detected moving over the tooltip -- hiding it.

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

Expected Behavior

The tooltip shoud not be hidden when the cursor passes over it -- only when the cursor leaves the area of the attached element.

Current Behavior

Moving the cursor over the tooltip closes it, even when the cursor is still over the attached element.

Steps to Reproduce (for bugs)

1. Create a button (can be any element)
2. Wrap it in a tooltip
3. Set the css of the buttons parent to:
   
   
   
   • overflow: auto
   
   
   • overflow-y: hidden
   
   
4. The Tooltip should now overlap with the button
5. Hover over the area where the button intersects with the tooltip
6. You should be able to observe the flickering

Sandbox

Context

The steps to provoke this problem may seem a little odd, but never the less, this is a problem for me.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.38 |
| React | 16.2.0 |
| browser | Chrome |

Possible Solution

Setting the css property "pointer-events: none" on the tooltip-popper does the trick.
It makes the tooltip beeing ignored for any kind of cursor-interaction.
Which is exactly what I would expect from a tooltip.

[abglassford]

That fix works perfectly for what I'm using it for. Thanks @freund17

[franklixuefei]

@freund17 Works for me as well! PR welcome!

[stefanwille]

Still happens on 1.0.0-beta.41

[stefanwille]

The code for the suggested solution is:

<Tooltip PopperProps={{ style: { pointerEvents: 'none' } }}>
  ...
</Tooltip>

[avetisk]

@stefanwille but beware, pointer-events are not yet supported by Safari :/ https://caniuse.com/#feat=pointer

[freund17]

@avetisk Wrong feature.

Directly from your link:

Not to be mistaken with the unrelated "pointer-events" CSS property.

Here is the correct one:
https://caniuse.com/#feat=pointer-events

;)

[avetisk]

@freund17 👍

[simoami]

There's an easier way to replicate: https://codesandbox.io/s/v0zzv4jx93

Just place the tooltip inside a container with overflow: (auto|scroll)

And based on @freund17 's suggestion, the following theme override solves it for me:

MuiTooltip: {
  popper: {
    pointerEvents: 'none',
    '&$open': {
      pointerEvents: 'none'
    }
  }
}

[rooch84]

Thanks @freund17, works for me too.

[oliviertassinari]

I have updated the reproduction to the latest version: https://codesandbox.io/s/4248q9vm0w.