Component librariesBasics V2
Tooltip
Call attention to UI elements and guide users through a process.
Overview
The tooltip component is great to call attention to UI elements and guide users through a process. It is typically used as a part of a tour or to provide additional information about a specific element. You can use the tooltip component out of the box as a built-in component.
Installation
To integrate the tooltip component into your application, follow the steps described in the library installation guide.
Workflow properties
When using the tooltip component in a workflow, you can define the following properties:
| Name | Type | Notes |
|---|---|---|
| Title | string | The title of the tooltip. |
| Body | string | The body of the tooltip. 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. |
| Target element | string | CSS selector of the element the tooltip points to. |
| Placement | select | On which side of the target element the tooltip should appear. |
| Dismissible | boolean | Shows a close button linked to the close exit node. Default is false. |
| Hide overlay | boolean | Hides the overlay highlighting the target element. Default is false. |
| Page targeting | --- | What page the tooltip should be shown on. Learn more |
Exit nodes:
- Continue
- Close
Tour properties
When using the tooltip component in a tour, you can define additional properties to control the tour flow.
| Name | Type | Notes |
|---|---|---|
| Title | string | The title of the tooltip. |
| Body | string | The body of the tooltip. 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. |
| Target element | string | CSS selector of the element the tooltip points to. |
| Placement | select | On which side of the target element the tooltip should appear. |
| Hide progress | boolean | Hides the tour progress indicator from the tooltip. Default is false. |
| Dismissible | boolean | Shows a close button linked to the cancel exit node of the Tour block. Default is false. |
| Hide overlay | boolean | Hides the overlay highlighting the target element. Default is false. |
| Page targeting | --- | What page the tooltip 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