Using XForms hint

The XForms hint element is used by form authors to provide some extra text that will be used to help people complete their forms. The text is displayed when the user places their mouse over a control, and disappears automatically, 10 seconds later. The message is also removed if the user moves their mouse away or clicks on the control to start entering data.

For each of the examples we have below, there is both the markup and a live version of the code; so move your mouse over the various controls to see how the markup behaves.

(The exclamation icon is from Jonas Rask.)

The basic format

A simple example is to add a hint that uses inline text, like this:

<xf:trigger>
  <xf:label>Delete all records</xf:label>
  <xf:hint>This will remove all of your records!</xf:hint>
</xf:trigger>
      

Adding HTML markup

The text in a hint can be any HTML markup, such as text formatting:

<xf:trigger>
  <xf:label>Delete all records</xf:label>
  <xf:hint>This will remove <em>all</em> of your records!</xf:hint>
</xf:trigger>
      

<xf:trigger>
  <xf:label>Delete all records</xf:label>
  <xf:hint>
    This will remove <em>all</em> of your records!
    <img src="images/exclamation.png" />
	</xf:hint>
</xf:trigger>
      

Delete all records This will remove all of your records!

Styling the hint

Since the hint itself is simply an inline element, it can be styled like any other. For example, to set the width and background of the hint, we might do this:

<xf:trigger>
  <xf:label>Delete all records</xf:label>
  <xf:hint style="background-color: red; width: 300px;">
    This will remove <em>all</em> of your records!
    <img src="images/exclamation.png" />
  </xf:hint>
</xf:trigger>
      

Delete all records This will remove all of your records!

Of course, you'll generally want to use rules in stylesheets, rather than applying style directly to an element. For example, the red background and exclamation image we just saw could be used on all hints with a class of 'danger', by setting up rules for the CSS class:

<style type="text/css">
  .danger {
    background: red url(images/exclamation.png) no-repeat 5px;
    padding-left: 48px;
    height: 2em;
    width: 300px;
  }
</style>
      

<xf:trigger>
  <xf:label>Delete all records</xf:label>
  <xf:hint class="danger">
    This will remove <em>all</em> of your records!
  </xf:hint>
</xf:trigger>
      

This technique is useful for formatting hints in different ways for different controls. For example, a hint on an input control is normally shown just below the control's label:

<xf:input ref="firstname">
  <xf:label>Forename:</xf:label>
  <xf:hint>Please enter your first name</xf:hint>
</xf:input>
      

However, by adding a left margin on all hints that are attached to an input control, we can offset the position of the hint by the same amount as the label, so that it lines up with the data entry area:

<style type="text/css">
  xf\:input xf\:hint {
    margin-left: 200px;
  }
</style>

<xf:input ref="surname">
  <xf:label>Surname:</xf:label>
  <xf:hint>Please enter your surname</xf:hint>
</xf:input>
      

Adding XForms markup

Finally, just as we can add HTML markup to the hint, we can also add XForms markup:

<xf:input ref="age">
  <xf:label>Age:</xf:label>
  <xf:hint>
    Please enter <xf:output value="concat(../firstname, ' ', ../surname)"></xf:output>'s age
  </xf:hint>
</xf:input>
      

Further reading

For more information see the definition of hint in the XForms 1.1 specification.