I’ve found that I really don’t like the tool tip validation messages. I’d like to make them go away in favor of my own error message widget, but I can’t figure out how to get just the tool tip to go away. I want to retain the validation marker (triangle with ! in reindeer) tool tip. How do I get rid of (just) the tool tip? I also do not want to disable ALL tool tips in the application (i.e. display:none on the v-tooltip css class wouldn’t be good)
Here’s why I don’t like the tool tips for validations:
When the user attempts to correct the invalid form value, the tool tip appears under the mouse and the user can’t actually click the form field to edit the value that is in error on their first attempt. The user then proceeds to play a game of cat and mouse with the tool tip (and it’s shadow), trying to position tool tip to gain access to the form field. Access to the form field must be obtained without leaving the form field after the tool tip appears, otherwise the tool tip disappears and appears under the mouse cursor again and intercepts the user’s click. If the user’s mousing dexterity is low, or the mouse is on an uneven surface this can be quite frustrating. This is particularly bad for combo boxes. If the error text is longer than the combo box, the tool tip usually covers the little arrow icon required for selecting a new value completely. It is somewhere between difficult to impossible to mouse precisely where the tool tip it won’t cover the right side of the box, wait for the tool tip to appear, and then mouse to the arrow without leaving the combo box’s screen space. Makes a challenging video game, but not a friendly UI
It’s of dubious value for accessibility. Vaadin implements this as a div at the body level that is then positioned using css. There is no DOM level association with any relevant part of the UI, aside from the fact that it overlaps the form field. Furthermore, the tool tip tends to be smaller font and this is worse for low-vision or older users.
There is no way to see more than one message at time unless you also use a form component to contain individual fields. That in turn, inhibits the use of custom components for common collections of form fields when they occur in multiple forms in the application. It also constrains the location of the error messages.
The tool tip validation messages can only be plain text, with no opportunity for interactivity.
If I build my own error message display component, and don’t get rid of the tool tips, this creates a duplication of the message (or it’s key) in the UI code that must be managed and kept in sync
We’ve got also some remarks about original ToolTip, like it is positioned always near to the mouse cursor but in case of validation errors in form fields, we require the tootip to appear next to validation alert icon. So current solution is no customizable in any way. Am I right? Can someone from VAADIN team give us some clues about our concerns?
