Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Best practices for using helper text

Updated on December 13, 2022

While labels organize content and identify a control or a field, helper text is useful when users might need additional instructions to complete a task. Pega Platform provides several out-of-the-box options for adding text to your application with varying degrees of accessibility.

Learn more about the best practices for using helper text to build a UI that serves all users, including users who rely on assistive technologies.

NameDescriptionBenefitsDrawbacksKeyboard supportScreen reader supportRecommended
In-lineThe text is displayed directly below the control.

For more information, see Adding text to controls.

  • Benefits all users.
  • Helper text content is not hidden in attributes of elements visible only to a screen reader.
In-line helper text across multiple controls might introduce clutter.YesYesYes
Smart tipA bubble of text is displayed directly above or below the field.

You can configure a smart tip by creating an action set. For more information, see Adding action sets to a control and Available UI actions.

  • Information is presented without adding extra elements to the UI.
  • Highly customizable.
Smart tips produce an ARIA label on the field, overriding the label for screen reader users.YesYesYes
TooltipHelper text is displayed when the user hovers on the field.

Tooltips use the title attribute in HTML. For more information, see Adding text to controls.

  • Not supported by mobile browsers.
  • No keyboard support.
  • Might override labels.
NoYesNo
Help icon with overlay on hoverA help icon is displayed next to the label of the control. The icon is not a focusable element.

For more information, see Adding text to controls.

No keyboard support.NoYesNo

For example: The following figures show sample helper text configurations:
In-line text
A text input field with in-line helper text underneath the field.
Help icon with overlay on focus
A text input field with a help icon on focus configured for helper text.
Smart tip
A text input field with a smart tip action configured on focus.
Tooltip
A text input field with a tooltip configured for helper text.
Help icon with overlay on hover
A text input field with a help icon on hover configured for helper text.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us