The Help Element

Mark Birbeck's picture

As with hint, the help element can be added to any form control, can contain other mark-up, and hides its implementation details--all of which make it very easy for authors to use.

Let's use the help element to provide more information about the Description control:

<xf:input ref="description">
  <xf:label>Description:</xf:label>
  <xf:hint>Enter a <strong>description</strong> for the link</xf:hint>
  <xf:help>
    Although called a <em>description</em>, del.icio.us uses this
    field more like a title.
  </xf:help>
</xf:input>

Once you've updated your form, reloaded it and put your cursor in the Description field, press F1. The display you have should look something like this:

Screenshot of help text for the 'description' control

The user can continue to interact with the form whilst the help is displayed--it won't be removed until the OK button is pressed. The help window can be moved out of the way if necessary, simply by dragging the blue title bar.