Field Level Help

Field level help, denoted by the information icon, can be used when you need to provide supplemental information. The text is displayed in a popover when the user clicks on the information icon. While not limited to, the most common use case for field level help is seen on forms.

This pattern should NOT be used when:

  • Compensating for bad design and relying on it to explain a graphic or word choice.
  • The information displayed by the popover is necessary to read.

Field level help

Field Level Help

Field level help with expanded text

  1. Icon: The help icon is Font Awesome icon, fa-info-circle, and is positioned to the right of the component. The icon is blue (pf-blue) to indicate that it is interactive.

  2. Text: We recommend that the popover text does not exceed three sentences. If needed, include a link to online resources. The popover supports HTML formatting.

  3. Popover: It is recommended that the popover is dismissed after the user’s next click.

Example

Reference Markup

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label" for="help-2">Default <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title="" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href='#'>dolore magna aliqua</a>." data-placement="top"><span class="fa fa-info-circle"></span></a></label>
    <div class="col-sm-9">
      <input type="text" id="help-2" class="form-control">
    </div>
  </div>
</form>
<script>
  // Initialize Popovers
  $(document).ready(function() {
    $('[data-toggle=popover]').popovers()
  });
</script>