Adding info text around a form field

Hello everyone,

It’s been a few weeks that I’m using Vaadin, and it’s still hard for me to think in term of components and widgets, since I’ve been used to the jQuery flexibility. Nevertheless I find Vaadin is a really powerful framework, but I’m still missing some clues to achieve what I want.

My application contains a form with some TextFields and Selects. I’d like to add a small text description under each field, a kind of tooltip but fixed.
The nicest would be to use a specific style for the tooltip, using the field’s getDescription method, and instead of inserting dynamically an absolute div, using a fixed div under the field. But I don’t really know in which direction to look.
The other way I try is using the CustomField add-on, with CustomField or FieldWrapper. But either it does not work or I cannot figure out how to use it well.

So I would appreciate any idea to implement such a functionality.
Thanks !


Edit: added image


FieldWrapper should be the easiest way to do this.

You can create a (generic) FieldWrapper which takes the field to be wrapped as a constructor parameter and creates a suitable layout around it. If you like the flexibility of jQuery and are comfortable with CSS, you might want to choose the light-weight CssLayout here. Use setCompositionRoot(layout) to set the layout in the constructor, and copy the description from the field to a Label in the layout when configuring the layout.

If using a Form component, you can use a custom FormFieldFactory which just calls the default field factory methods and then wraps the fields in your custom FieldWrapper.

While not quite the same case, you can find an example of the use of FieldWrapper

Thank you much for your answser Henri.

That’s the way I went in the end, but was annoyed (and I’m still) by this generic type of the FieldWrapper. In the case of the CityField, it is clear that it always returns a city. But in my case, fields taken as parameters can return different types of objects (actually String and Enum for the moment).

Where does this disturb you - which API methods or other aspects?

You could for instance make your subclass of FieldWrapper parametrized by the property type like FieldWrapper itself is, and if you want, create further subclasses of that class by the property type - e.g.


Then again, if the types are not relevant in any API methods of your FieldWrapper (e.g. if it only takes care of the description), such subtypes are probably not necessary and you could even make your subclass of FieldWrapper non-generic.

If you have concrete suggestions for improvements to CustomField or FieldWrapper, please write them here or in the issue tracker of CustomField (see the source code link from the directory page), but I am not sure if I will have much time for this add-on. The more detailed and clearly justified a request is, the better the chances are that I will try to find time to do something about it, and patches are also welcome.