Overview

There are a number of ways to provide additional help to users as they enter data into fields: field level help and syntax hints.

Field Level Help

Field level help, denoted by the information icon, can be used to provide supplemental information. The help text is displayed in a popover when the user clicks on the information icon. Popovers are triggered on click, are mobile-friendly, and are ideal when links need to be listed in the help. While popovers are recommended, you can use tooltips if it is preferred to have the information appear on hover. Tooltips are best suited for desktop browsing, though they’re supported on mobile devices as well.

While not limited to, the most common use case for field level help is seen on forms.

Recommendations for usage:

  • Use wherever any field needs additional explanation
  • The description length should be as concise as possible

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

Syntax Hints

Syntax hints help users successfully complete forms by displaying an example of the required or recommended format for the input data. Syntax hints are useful when users are asked to provide unfamiliar data and there is a specific format the data should follow.

Recommendations for usage:

  • Only use for open text input fields
  • Limit use to avoid overwhelming the user
  • The hint length should be as concise as possible and not extend the length of the text field

This pattern should NOT be used:

  • When syntax requirements are complex and the explanation is lengthy - for example, when outlining password requirements.
  • When the information is not necessary for the user to read to complete their task. In this case, use Field Level Help.
  • As a replacement for form field labels. For more information, see Field Labeling.

Default state

Syntax help without errors

Page with errors

Syntax with errors

What’s not covered in the current design but will be covered in future sprints:

  • Alternative design solutions that work with assistive technology or older web browsers that do not support placeholder syntax hints.

Field Level Help

Field level help with expanded text

  1. Icon: The help icon is PatternFly icon, pficon-info, 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.

Syntax Hints

Syntax level help box

  1. Syntax Hint: In a default state, the hint is located beneath the text field.

  2. Hover State: On hover, the mouse cursor appears over the text field and the hint remains visible.

  3. Focus State: When the user has clicked into the text field, the hint remains visible and the cursor becomes active inside the text field.

  4. Input Data: Once the user has begun typing in the text field, the hint continues to remain visible.

  5. Error State: When the user provides data that is not valid, the hint will turn red to indicate they must input the data in the correct format.