Material-ui: [Tooltip] Moving anchor can cause tooltip to stay in view after mouse move

[Thomas101]

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

Expected Behavior

If you have an open tooltip and an onClick handler on the anchor which moves the anchor out of focus of the mouse the tooltip should dismiss as the mouse is no longer over the element

Current Behavior

The tooltip remains open until a click somewhere else in the window is triggered, giving what appears to be a broken behaviour.

Steps to Reproduce

Codesandbox example
Click the button and see the tooltip remain visible

Context

My use case is a little more complex than the above example, but this demonstrates the base problem. My element moves when clicking, but the tooltip remains visible. There's no easy way to dismiss it other than creating a completely controlled component and handling mouse events manually.

There may be some cases where dismissing on click isn't the desired behaviour, so it may be preferable to have this as an option (e.g. dismissOnClick={true}) or exposing a call that can dismiss the tooltip (e.g. this.ref.tooltip.close())

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.4.1 |
| React | v16.4.1 |
| browser | Chrome 68 |

[oliviertassinari]

There's no easy way to dismiss it other than creating a completely controlled component and handling mouse events manually.

@Thomas101 There are a open, onClose & onOpen properties. Controlling the tooltip should be straightforward.

[Thomas101]

That's true and what I've done for time being.

Felt a bit like a broken behaviour, and a pain to have to handle the state/pull out into a new component when tooltips are normally so zero-config :)

If it's the desired behaviour, happy to leave it there,
Thanks

[oliviertassinari]

~@Thomas101 Well, https://github.com/mui-org/material-ui/issues/12289#issuecomment-408262317 might enable you not to have to control the tooltip. Maybe you could try this change internally?~

I will try something out, but I doubt we can do much about it without relying on a Mutation observable that is not yet widely supported by the browsers.

[oliviertassinari]

Replacing the mouseenter / mouseleave events with mouseover / mouseout events doesn't help. I fear controlling the tooltip is your best option.

[Thomas101]

Okay, thanks for looking into it and following up.

By the way great work on material-ui. We love it :)

[luisgurmendezMLabs]

It's a bit hacky but you could do a toggle of the tooltip like:

setTooltipOpen(false)
setTimeout(() => setTooltipOpen(true),1)

And add a hover listener, this will unmount and mount the tooltip several time, i don't think that is the best solution, but maybe it could help