Vaadin 8 Tooltips not Hiding automatically on mobile browsers

Hello everyone. I’m currently having a hard time getting tooltips to work without usaability problems on touchscreen devices.
It seems like the whole “hiding-when-out-of-focus” mechanism doesn’t seem to work well when using a touch device.

I have two kind of tooltips:

  1. Error Tooltips, when the user input is wrong (as per documentation here
  2. A description tooltip for a date field which tells the user which format is expected by the field

When I click in the Datefield and then click out of it, the tooltip stays at the same place it originally showed up and only goes away if I produce an error in another field which causes the error tooltip to show up. But then the error tooltip doesn’t go away!

To get rid of all tooltips I have to change focus to a field which has valid input in it. But when I have focus on a field with an error and then click anywhere on the page to loose focus, the tooltip stays.

Some screenshots that document the problem are attached to this post.

Currently, I’m simply hiding all tooltips when I detect a mobile device but then a user will not get specific information about why a field has a red exclamation mark next to it.



Has anybody had a similiar problem? Can i further explain my problem if my first post isn’t detailed enough?