Hints
Overview
A hints block is used to represent a hints component in your flow.
Hints are great for calling attetnion to UI element to help users discover new features, provide contextual help, or nudge them towards a good next step.
A hints block is comprised of hints items, each of which represents an individual hint in your product.
Hints items can be completed or dismissed.
Completing a hint item could be attributed to clicking a "Got it" button in a popover that is teaching you about a product's object model.
Configuration
Hints
Hints can be configured with custom fields.
Hints item
Hints items can be configured with the following default fields:
| Field | Type | Description |
|---|---|---|
| Title | string | Content for the hints item title heading |
| Body | rich text | Content for the hints item body section |
| Complete label | string | Content for a complete button in the hints item |
| Dismiss all label | string | Content for a dismiss all button in the hints item |
You can also define a set of custom fields on a hints item.
Transitions
The hints block has a fixed set of transitions that determine which path(s) to follow. These transitions map to hint actions that a user can take.
| Transition | Description |
|---|---|
| complete | Marks the hints as completed |
| dismiss | Marks the hints as dismissed |
Integrating
Get up and running quickly with the pre-built React hints component. Compose and style this component to best fit your needs. Or use the hints block headlessly and attach the hint’s fields and state to your own hint/hotspot UI component.