Adding Tooltips to TextField

Question

I want to add a TextField with inline help text, a user prompt, a placeholder until the user enters the text. The help text disappears when the TextField focuses and reappears if the TextField loses focus and the text is not entered.

Initially, I thought it would be a universal function for Vaadin TextFields, but that does not seem to be the case. Now I'm looking for a way to implement my own TextField extension to add this feature. But I'm stuck.

My question is: if someone here has done this before or instinctively knew how to do it?

Here is how far I came:

 package com.smarttrust.m2m.gui.admin; import com.vaadin.event.FieldEvents.FocusEvent; import com.vaadin.event.FieldEvents.FocusListener; import com.vaadin.terminal.gwt.client.ui.VCalendarPanel.FocusChangeListener; import com.vaadin.ui.TextField; public class M2MHintTextField extends TextField implements FocusListener { private final String hint; FocusListener listener = new FocusListener() { @Override public void focus(FocusEvent event) { // TODO Auto-generated method stub } }; public M2MHintTextField(final String hint) { super(hint); this.hint = hint; super.addListener(this.listener); } @Override public void focus(FocusEvent event) { // TODO Auto-generated method stub } } 

Answer 1

Built-in function

After some research, I found that this is an integrated function in all input controls (TextField, TextArea, DateField, ComboBox).

Vaadin Stream (Vaadin 10)

A function is a property called Placeholder.

You can optionally pass placeholder text to the TextField constructor along with an optional initial value.

 new TextField( "label goes here" , "hint goes here" ) 

Or call the setter and getter: TextField::setPlaceholder and TextField.getPlaceholder .

 myTextField.setPlaceholder( "Hint goes here" ) ; 

Vaadin 8

A function is a property called Placeholder.

Call the getter / setter methods: TextField::getPlaceholder and TextField.setPlaceholder .

 myTextField.setPlaceholder( "Hint goes here" ) ; 

Vaadin 7

A function is a property called InputPrompt.

Call the getter / setter methods: TextField::setInputPrompt and TextField::getInputPrompt .

 myTextField.setInputPrompt("Hint goes here");