tooltip does not hide after click and mouse out

[jlmagee]

See http://plnkr.co/edit/czAjxGgc4AbS9cTq5CPw

The tooltip does not hide if the associated button/icon is clicked and the mouse is moved away. Same thing happens if the icon is touched on mobile.

There is another issue demonstrated in the plnkr. The tooltip only works at all if positioned above the md-icon element rather than within it as documented on the website.

[marcysutton]

That's because the element is focused after you click on it. Sounds like it needs a delay added that will hide the tooltip after a period of time. I thought it already did that, but obviously it doesn't.

[marcysutton]

The mdTooltip docs actually state that it stays when a button is focused, so this seems by design: https://material.angularjs.org/#/demo/material.components.tooltip

This issue seems to come up quite a bit, where clicking on an item also focuses it. Differentiating mouse clicks and keyboard focus is most likely key to solving this issue if we don't want to add a timeout to hide the tooltip.

[jlmagee]

Thanks @marcysutton . I obviously had not read the documentation carefully. Nonetheless, the tooltip may often hide useful content and not removing it after the button click is definitely undesirable. If a touch results in some action, then the tooltip should. also disappear.

[myagoo]

+1

[erwinmombay]

@marcysutton could you explain what the other options are besides adding a timeout after the click? trying to grasp what the proper behavior should be. Thanks!

[marcysutton]

Unfortunately there aren't many options for this, as people are requesting behavior different from what the browser does by default. You can see what we discussed for mdButton in this PR: #1594

The basic gist is that tooltips should potentially not persist when touching or clicking with the mouse, but they should when focusing an item with the keyboard. Besides the PR mentioned above, you can read more details about what I had to do for buttons in this blog post.