The Hint component presents buttons to the learner that open a dialog with additional text to hint about the topic. The Hint component can be set to a column’s layout and display hints to the learner step by step.
This article provides an overview of the Hint component, component setup and behavior, and examples of Hint component configurations.
The Hint component is an interactive component that lets you present hints and tips to the learners in a pop-up dialog. When the first Hint item is closed, the learner can click the following button to view the next Hint item. It is also possible to add icons on the Hint component buttons.
The Hint component is fully responsive.
Component set up
Follow these steps to add the Hint component to a Block:
Click the Edit Component icon on the newly added Card Drop component to begin set up.
In the General section:
Add Hint Title, or a Hint Display Title, as needed. Display Title is seen by learners.
Scroll down and add your Hint Body. Use the text editor to style and format your text, as needed.
- Add Hint Instruction Text that tells users how to use the component.
- Include an Aria Label for screen readers, as needed.
Interaction Label section
In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Hint component that can display an icon and label prior to the Hint component completion, which changes to a different icon and label once the Hint component is completed.
In the Appearance section, you select Number of items in a row. This option allows you to choose the number of items displayed next to each other before starting a new row. You can select 1, 2, 3, or 4. By default, the number of items per row is set to 3.
In the Animations section, you toggle to enable what animations are run when the next hint item is displayed.
Add Hint Items
In the Items section, you add Hint Items to your Hint component.
For each Hint Item:
- Add Item Title that should appear in the Hint dialog.
- Add Item Body that will display in the Hint dialog. Use the text editor to style and format your text, as needed.
- Add Button Text that will display in the Hint button.
- Select Hint Button and Dialog Icon that will display in the Hint button and inside the Hint dialog.
- Enter Popup Close Button Text to be displayed in the Hint’s dialog close button.
- Set Hint Button Alignment. By default, this is set to Center. You can set alignment to Center, Left, or Right within the item column row.
Add, duplicate, or delete Hint Items as needed.
The Hint component gives you a lot of flexibility. Below are examples that illustrate Hint component setups:
Example 1 – Displays the Hint component with the first Hint Item 1 button. This is how the Hint component looks before the Hint item has been clicked on.
Example 2 – Displays the Hint Item 1 dialog, including some text as hints or tips.
Example 3 – Displays how it looks like after the Hint Item 1 dialog has been closed. To the right Hint Item 2 is now displayed. In this example the Hint component is set to display two Hint items in a row.
Did this article help?
Let us know by leaving a star rating or review at the top of this article.