This example shows how contextual help information can be provided, to assist users in completing a form, where specific values or formats are required.
The help information should be added in the
DOM, and inserted
immediately after the field it relates to, so that a logical
reading-order is maintained. The element itself should be a
<label> with its for attribute
pointing to the field, and should preferably have an inner
<em> around the actual text, to provide semantic
emphasis compared with ordinary labels.
Click or Tab through the fields below, and you'll see how some of them have contextual help information, which appears in a message tooltip to the right of the field it relates to:
The JavaScript code for this example can be found in: JS_F_AA1.js
The CSS for this example can be found in: JS_F_AA1.css