[Tooltip] Moving anchor can cause tooltip to stay in view after mouse move

• This is a v1.x issue.
• 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

[Thomas101]

Okay, thanks for looking into it and following up.

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

[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.