Vaadin set mouseover validation message (tooltip) to show without delay? - vaadin

Question

Vaadin 7.6.2
When I mouseover a field that has failed validation I see the error message as expected, however the delay before this message appears is too slow and should be immediate, as the user can click into the field BEFORE the message pops open.
Is there a way to adjust the time it takes to display a validation message?

Answer 1

Add the following css to your custom theme and compile. The default animate in/out time is 120ms, below I have changed the animate in time to 1ms to get rid of the validators tooltip delay.
.v-contextmenu[class*="animate-in"] {
-webkit-animation: valo-overlay-animate-in 1ms;
-moz-animation: valo-overlay-animate-in 1ms;
animation: valo-overlay-animate-in 1ms;
}
.v-contextmenu[class*="animate-out"] {
-webkit-animation: valo-animate-out-fade 120ms;
-moz-animation: valo-animate-out-fade 120ms;
animation: valo-animate-out-fade 120ms;
}
UI Code...
#Theme("mytheme")
#Widgetset("com.kevin.vaadin.sample.MyAppWidgetset")
public class MyUI extends UI {
#Override
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
final TextField name = new TextField();
name.setCaption("Type your name here:");
Button button = new Button("Click Me");
button.addClickListener( e -> {
layout.addComponent(new Label("Thanks " + name.getValue()
+ ", it works!"));
});
name.addValidator(new StringLengthValidator("Name is too short.", 5, 10000000, false));
layout.addComponents(name, button);
layout.setMargin(true);
layout.setSpacing(true);
setContent(layout);
}
#WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
#VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
}