Component librariesBasics V2
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, follow the steps described in the library installation guide.
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. |
| Primary button | action | The primary button, see Action for all options. When empty the button is not rendered. |
| Secondary button | action | The secondary button, see Action for all options. When empty the button is not rendered. |
| 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 | Horizontal offset of the hotspot relative to the target element. |
| Hotspot Y offset | number | Vertical offset of the hotspot relative to the target element. |
| Dismissible | boolean | Shows a close button linked to the close exit node. Default is false. |
| Page targeting | --- | What page the hint should be shown on. Learn more |
Exit nodes:
- Continue
- Close
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. |
| Primary button | action | The primary button, see Action for all options. When empty the button is not rendered. |
| Secondary button | action | The secondary button, see Action for all options. When empty the button is not rendered. |
| 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 | Horizontal offset of the hotspot relative to the target element. |
| Hotspot Y offset | number | Vertical offset of the hotspot relative to the target element. |
| Hide progress | boolean | Hides the tour progress indicator from the hint. Default is false. |
| Dismissible | boolean | Shows a close button linked to the cancel exit node of the Tour block. Default is false. |
| 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: Proceeds to the next step in the tour
- Previous: Goes back to the previous step in the tour
- Cancel: Cancels the entire tour
Last updated on