Help Text
Overview
Help text allows users to see expanded information in a floating message box.
Other names: Popover, Help Content
Behaviors
Focus state
Help text appears when a user activates the container that has its trigger. When the user selects outside the help text box, focuses on something else, or navigates away with their keyboard, it disappears.
When opened, the help text is in the focused state by default to help screen readers indicate it has appeared. The only state help text can have is focused. When it’s not focused, it disappears.
Animation
Help text appears with an animation lasting 250ms, as mentioned in the motion guidelines.
Help text disappears at the speed set by Kendo.
Disabled
Help text and its trigger can be disabled if their containing element is disabled and the help text is not relevant in that state. However, if the help text is still relevant in some way, perhaps explaining why the container may be disabled, the triggering element and the help text can remain enabled.
Usage guidelines
General
Help text is not meant to be used as a modal and shouldn’t be used for confirming actions or information.
Content guidelines
Label
The label should be brief, no more than a few words. The label should be specific to what the help text addresses.
Body
Help text shouldn’t just repeat the copy that’s already visible on the UI. It also shouldn’t contain critical information that the user needs to succeed. Instead of relying on help text to explain difficult concepts, revisit the clarity of the design and utilize existing component text.
Be sure to not make the content in a help text pop-up too complicated or technical. You can link a technical document or other help resource instead.
Images
Help text can contain additional content like text links and images. Images should not exceed 440px wide, including padding. Images should be informative, never decorative. Consider if it adds value to the user, or if it will distract them. Images need to include alt text to be accessible.
Try this
- You can customize the format for command line parameters. View the defaults.
Not this
- Optional. Specify the format for any command line parameters.
- managed account name = %u
- managed account password = %p
- managed asset name = %h
- managed asset IP = %i
- database port = %t
- database instance or asset name = %d
- jump host dns = %n
- database dns = %s
- access URL = %w
Placement
Help text should appear near the trigger, but not hide it or any other relevant UI elements— if possible. Help text should be concise, consider how you can keep the character count low through word choice and text links. When help text hides other relevant content it can cause users frustration.
Help text also shouldn't be cut off by the edges of the browser window in any direction. In these situations, move the help text to the nearest place that doesn't cover important elements or get cut off.
Help text or tooltip
Help text:
- For longer informational content, like detailed instructions
- Displayed by selecting an icon, often a question mark
- Can contain different formats of content, including images
Tooltips:
- For shorter informational content, like quick definitions and short explanations
- Displayed on either focus or hover of an element
- Content is text only with little to no formatting
Related
Referenced in this section:
Components and patterns that use help text:
Updated 8 days ago