Tooltips are 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, a few seconds later. The message is also removed if the user moves their mouse away or clicks on the control to start entering data. Tooltips can contain text, images, links and even other XForms controls, and this tutorial shows how to use them. Along with the sample markup, the examples below are live, so move your mouse over the various controls to see how the markup behaves. (The exclamation icon is from Jonas Rask.) Mickey Mouse 80

The basic format

In XForms, a tooltip is added using the hint element. The simplest example 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>
      

or images:

<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>
      

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>
      

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>
      

and then using the class name on the hint:

<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>
      

Note how the text in the hint comes from the values in the two controls, above. Changing the values above will also change the text of the hint.

Further reading

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