Hint
Draw attention to features with subtle, pulsating hints.
Overview
The hint component provides users with a subtle, contextual guidance without interrupting their flow. This component minimizes disruption while still drawing attention to important features or actions. You can use the hint component out of the box as a built-in component.
Installation
To integrate the hint component into your application, install the Flows components package. This package provides the hint along with other built-in components. For detailed instructions, see React installation or JavaScript installation.
Workflow properties
When using the hint component in a workflow, you can define the following properties:
| Name | Type | Notes |
|---|---|---|
| Title | string | The title of the hint. |
| Body | string | The body of the hint. Supports HTML. |
| Continue text | string | The text of the continue button. When empty the button is not rendered. |
| Show close button | boolean | Show a close button in the top right corner. Default is false. |
| Hotspot target element | string | The CSS selector of the element the hint hotspot should appear on. |
| Hotspot placement | select | On which side of the target element the hint hotspot should appear. |
| Hotspot X offset | number | X offset of the hint hotspot from the target element. |
| Hotspot Y offset | number | Y offset of the hint hotspot from the target element. |
| Page targeting | --- | What page the hint should be shown on. Learn more |
Exit nodes:
- Continue: The user clicks the continue button.
- Close: The user closes the hint.
Tour properties
When using the hint component in a tour, you can define additional properties to control the tour flow.
| Name | Type | Notes |
|---|---|---|
| Title | string | The title of the hint. |
| Body | string | The body of the hint. Supports HTML. |
| Continue text | string | The text of the continue button. When empty the button is not rendered. |
| Previous text | string | The text of the previous button. When empty the button is not rendered. |
| Show close button | boolean | Show a close button in the top right corner. Default is false. |
| Hotspot target element | string | The CSS selector of the element the hint hotspot should appear on. |
| Hotspot placement | select | On which side of the target element the hint hotspot should appear. |
| Hotspot X offset | number | X offset of the hint hotspot from the target element. |
| Hotspot Y offset | number | Y offset of the hint hotspot from the target element. |
| Page targeting | --- | What page the hint should be shown on. Learn more |
| Wait | --- | Used to define what interaction should trigger the next step. Learn more |
Exit nodes:
- Continue: When the user clicks the continue button the tour moves to the next step.
- Previous: When the user clicks the previous button the tour moves to the previous step.
- Cancel: When the user closes the hint the tour is canceled.
Last updated on