Now Available: Inline Help Text for fields and Modules

[AJLaPorte]

When creating modules for use by content editors, oftentimes there is a need to provide simple instructions as to the intended use of a field or module, limits to the field or module, or even just some general knowledge about why the field or module was created.

What's happening?

In the past, the only way to provide additional contextual information on a field in a custom module was through a tooltip using the help text area. We're expanding the ways in which you can provide this contextual information. You can now add inline help text under the custom modules field label. In addition you can also now provide inline help text for the custom module as a whole. 

Why is this happening?

Many developers have requested and talked about this from time to time. With the growing need for more and more customization of modules, it's important that developers can convey information to their content editors and provide clear direction for the intended use (or limitations) of modules and fields. 

It’s important to understand that Help Text (in tooltip form) and Inline Help Text should not be used interchangeably. If the information you are displaying to the content editor is necessary for the editor in order to use the field correctly, then Inline Help Text is the best path to take. If the information is more supplementary in nature, then Help Text (tooltip) is the better path. 

Take the following use case as an example:

You have a custom module for showing a recipe and this module contains a repeater text field for ingredients. For this field, the following would be appropriate uses for help text.

• Inline help text (shows under the field label):
  “Do not abbreviate the unit of measure. (ex: use Ounces instead of Oz.)”
• Help Text (shows in the tooltip when hovering):
  “If you are recommending a brand name product, please make sure to include the brand name in parenthesis with the appropriate trademark applied. Ex: (Ortega®)”

To learn more about when you should use help text vs inline help text, view our documentation here.

When is it happening?

This feature is available now and can be used both in local development and from inside the Design Manager UI. Information on how to use this in both are provided below.

How to add inline help text:

To learn how to add inline help text to your modules and fields, please refer to the resources below:

• Through Local Development:
  • Field level inline help text:
    https://designers.hubspot.com/docs/building-blocks/module-theme-fields#properties-used-by-all-fields
  • Module level inline help text:
    https://designers.hubspot.com/docs/building-blocks/modules/configuration#meta-json
• Through the Design Manager
  https://knowledge.hubspot.com/cos-general/create-and-edit-modules#set-field-editor-options