Hint Component

This component is suitable for use when creating accessible courses.

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.

Component overview

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

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Scroll down and add your Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. 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. This widget 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.

Appearance section

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.

Animations section

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:

1. Add Item Title that should appear in the Hint dialog.
2. Add Item Body that will display in the Hint dialog. Use the text editor to style and format your text, as needed.
3. Add Button Text that will display in the Hint button.
4. Select Hint Button and Dialog Icon that will display in the Hint button and inside the Hint dialog.
5. Enter Popup Close Button Text to be displayed in the Hint’s dialog close button.
6. 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.

Component Examples

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.