Dynamic Input Hints mini
Also known as: Automatic Inline Help, Form Field Hints
Dynamic Input Hints are instructional texts or examples that are shown when a user clicks or tabs to an input field.
Showing input hints only when people feel they need them keeps the form simple and uncluttered compared using Always Visible Input Hints. Therefore, Dynamic Input Hints should be considered to be used especially with complex, long forms with many input fields. Also, this patterns works best for forms containing questions that most people can answer, but they are not sure why or how they should give their answers.
When the user moves to an input field, the helps text should appear immediately below or beside the input field, and the selected input element should be highlighted. Usually an input hint is related to one form field, but sometimes it is a better idea to bound the help text to a set of inputs. In both cases it is important to tie the help text visually to the input field it is connected to.
If it is important to show the help text before the user moves to an input field, consider using Input Prompt (show the help text inside an input box).
Example Images (5 examples)
Twitter Bootstrap popover exampleSource: http://twitter.github.com/bootst...
How to fill in your mini-resumeSource: http://angel.co/
eBay registration formSource: http://ebay.com/
Ebay uses dynamic Input Hint to provide guidance on how to choose a good password. This kind of highly visible Input Hints can be annoying if used in everyday context, but are good and effective way of communication in forms that are used rarely.
Creating an email campaignSource: http://www.mailchimp.com/
Flight searchSource: http://www.finnair.fi/
Finnair uses Input Prompts as labels for text fields, and Dynamic Input Hints after the text field is clicked.