Inline Help Text
Inline help texts provide useful information about settings:
![Inline help text Inline help text](images/context_help_inline_text.png)
When to use
Follow the rules for context help.
How to use
Text length
Show no more than five lines of help text to not clutter the screen. Text width is limited to 70 characters.
![Inline text height Inline text height](images/inline_text_height.png)
Show more than five lines only when a text cannot be shortened for legal purposes.
![Inline text legal Inline text legal](images/inline_text_legal.png)
Implementation
Links
Provide a link to the corresponding help article or to a place in the IDE where the related settings can be found. Place the link at the end of the text where possible so that it does not disrupt reading.
Internal link ![]() | External link ![]() |
Text style formatting
Avoid highlighting
Avoid text highlighting. Usually, the help text is short, and no highlighting in bold or italics is needed:
Correct ![]() | Incorrect ![]() |
Avoid brackets
Avoid using brackets in control labels and place this information in the inline text instead:
Correct ![]() | Incorrect ![]() |
Writing guidelines
Make help text short and descriptive.
Do not repeat the setting name in the help text:
Correct ![]() | Incorrect ![]() |
Placement
Labeled inputs, checkboxes, radio buttons, and buttons
Place the help text to the right of labeled inputs (fields, combo boxes, or text areas), checkboxes, buttons, or radio buttons if all the following applies:
The space to the right is empty.
The help text has 1–5 words, not counting articles and prepositions.
The control label has 1–5 words.
![Input fields with inline texts on the right Input fields with inline texts on the right](images/inline_text_on_the_right_input_field.png)
Implementation
![Checkboxes with inline texts on the right Checkboxes with inline texts on the right](images/inline_text_on_the_right_checkbox.png)
Implementation
![Button with inline texts on the right Button with inline texts on the right](images/inline_text_on_the_right_button.png)
In other cases, place the help text under the UI controls:
![Input filed with inline text on the bottom Input filed with inline text on the bottom](images/inline_text_on_the_bottom.png)
Implementation
If there is no space under the UI control, use the help tooltip with the question mark icon for labeled inputs, checkboxes, and radio buttons. For buttons, use the help tooltip without the icon.
Trees, lists, and tables
Text applies to the whole component
If the help text applies to a whole list, tree, or table, place it below the control.
![Inline text under the table Inline text under the table](images/inline_text_under_table.png)
Implementation
Text applies to a single item
If the help text applies to a single list, tree, or table item, its location will depend on its length.
Short texts
Place short texts (1–10 words) to the right of the item:
![Inline text under the table Inline text under the table](images/inline_text_on_the_right_tree.png)
Long texts
Place longer texts (more than 10 words) into the detail part of master-detail layouts:
![Inline text on the bottom of the master detail layout Inline text on the bottom of the master detail layout](images/inline_text_on_the_bottom_master_detail.png)
For other cases, use the help tooltip with the question mark icon:
![Inline text on the bottom of the master detail layout Inline text on the bottom of the master detail layout](images/tooltip_list.png)
Group of controls
If the help text applies to several UI controls, place it at the bottom of the group.
![Inline text for a group of controls Inline text for a group of controls](images/inline_text_group.png)
Implementation
Use Panel.group()
as the border for panels that need title and possibly the gray line on the right of the title:
You can find more examples by invoking the Tools | Internal Actions | UI | Kotlin UI DSL | UI DSL Showcase action (available in internal mode and clicking the View source links on specific pages.