The Help component lets users show and hide text.
The component opens and closes when a user engages with the question mark button. The component will be closed when a page loads.
{{ aspExample({ code: "<button class=\"asp-help asp-js-toggle-button\" type=\"button\" aria-expanded=\"false\" data-toggle-element=\".hint-example-1\" style=\"display:none\">Use the component to help users understand what information they need to answer a question.
The Help component hides content from users. It may be that users do not notice the component or understand how it works. For this reason, you should use it sparingly and only in specific situations supported, where possible, by user research.
Before you use this component, consider:
The component was specifically designed for the Assure application.
The application has two audiences: those who know how to use the application, and those who do not. The purpose of the Help component is to reduce the amount of visible content on the page, focusing attention on the question set, while allowing users to interact with support content if they need to.
Our preferred approach for this type of content is to place hint text directly under the question, so users can see it when the page loads.
This component is used on:
This list is not exhaustive.
This component uses JavaScript. When JavaScript is not available, users will see the content displayed as standard paragraphs.
This component can be used in dark mode.
For users of screen readers, the text in the button will be read as a single statement, and the call-to-action will be announced as ‘button’.
The criteria below must be met for a component to be approved for use within the ASP Digital Design System.