Tooltip stays visible when content button/element is released [mobile]

[jonnenauha]

Using 0.5.2 on a Nexus 9 stable channel Chrome.

I have a <core-tooltip> that hosts <core-item> and <paper-icon-button> both have the same problem.

I like that on touch/press and hold it shows the tooltip, I think this is good behavior. The user can still move his finger out if he wishes to not act on the element. But when the touch/tap is released on the element the tooltip wont hide.

On desktop the tooltip hides once you move your mouse from the element but on mobile you need to click/tap/touch somewhere else on the screen to hide the tooltip. Actually just moving your finger does not hide it, you need to tap a screen location (I guess removing the focus from the tooltip content). Very annoying for the user experience.

Any possibility this mobile release event could be detected form the <core-focusable> the tooltip extends? Is this a bug in there? Seems the button/item release event comes fine as the tap on it is recognized.

I know I could do some JS hack where I detect click/tap events and go through all my elements tooltips and hide them, but this is quite some work for something that I would expect to just work.

Thanks :)

[jonnenauha]

I'll just recognize that yes sometimes toggling the tooltip when you click the element is desired. But if its a action button/element that does triggers something you will basically get the tooltip shown when you click it and want to move on with using the app. At this point tapping somewhere on the screen to hide the just popped up tooltip is a big distraction.

Maybe this behaviour should be configurable with a new attribute in tooltip, the default could be left like it is now.

[ebidel]

That's right. In this case the tooltip gets focus and stays active until it loses focus.

Note that on mobile gmail, if you long press the search magnifying glass, the tooltip will stay up for a few seconds and fade away OR go away if you tap/scroll somewhere else on the screen. I think we can do something similar with the pressed state core-focusable gives us, but the problem is it also remains focused until you touch somewhere else on the screen. @morethanreal any ideas? Does core-focusable give any useful to know the difference between touch/mouse click?

I also think #18 is related. The tooltip should allow configuring a slight delay for showing itself.

[jonnenauha]

Yeah, I actually picked up the delay trick from #18.

I think having that kind of delay attribute would be beneficial for mouse based UIs as well. In the case of buttons you kind of want the tooltip only if you cant figure out from the button icon/text what it does. And then the normal response would probably be to keep your mouse on top of it for a while. Going to a button you already know (the functionality of), its kind of distracting that the tooltip pops immediately on mouse enter, when in this case you are not interested in it.

On mobile showing it on touch and hold is good. But I think as discussed it would be nice to have a bool attribute (showOnPress or similar?) that will hide it on when touch is released or if you move your finger (either some radius eg. 15px from the original touch point or if the touch moves outside the tooltip <content>).

Thanks for the reply and great lib. Hope this gets implemented. I've tried to use the "out of the box" tooltip if a few projects but have always had these small annoyances. Just now found this show delay trick which eased the pain a bit :)