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.
Basics V1 is in maintenance mode. We recommend migrating over to Basics V2, as it includes improved components, features, and is actively maintained.
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. |
| Continue text | string | The text of the continue button. When empty the button is not rendered. |
| Target element | string | The CSS selector of the element the tooltip should be attached to. |
| Placement | select | The placement of the tooltip. |
| Show close button | boolean | Show a close button in the top right corner. Default is false. |
| Hide overlay | boolean | Hide the overlay when the tooltip is open. Default is false. |
| Page targeting | --- | What page the tooltip should be shown on. Learn more |
Exit nodes:
- Continue: The user clicks the continue button.
- Close: The user closes the tooltip.
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. |
| 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. |
| Target element | string | The CSS selector of the element the tooltip should be attached to. |
| Placement | select | The placement of the tooltip. |
| Show close button | boolean | Show a close button in the top right corner. Default is false. |
| Hide overlay | boolean | Hide the overlay when the tooltip is open. 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: 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 tooltip the tour is canceled.
Last updated on