Creating Tooltips
What Are Tooltips
Tooltips are contextual help messages attached to specific UI elements in your application. Unlike flow steps, standalone tooltips appear independently based on their own trigger and targeting rules — they do not require the user to start a walkthrough.
Use tooltips to explain form fields, clarify icon meanings, describe button actions, or provide additional context for any element that may not be self-explanatory.
Tooltips vs. Flow Steps
BreakGround supports tooltips in two contexts:
- Standalone tooltips -- Created under Content > Tooltips. These live independently on a page and appear based on their own targeting rules. They are not part of a sequential flow.
- Tooltip steps -- Created inside a flow using the
TOOLTIPstep type. These appear as part of a step-by-step walkthrough and advance with the flow.
This page covers standalone tooltips. For tooltip steps within flows, see Step Types.
Creating a Tooltip
- Navigate to Content > Tooltips in the dashboard.
- Click Create New Tooltip.
- Use the visual selector to click the target element on your application page. The selector generates a CSS selector automatically.
- Enter the tooltip content using the rich text editor. You can include formatted text, links, and images.
- Choose the tooltip position relative to the target element.
- Configure targeting rules and display settings.
- Click Save to create the tooltip in
DRAFTstatus, or Publish to make it live.
Tooltip Positioning
Tooltips can be positioned relative to their target element:
| Position | Description |
|---|---|
| Auto | The tooltip chooses the best position based on available viewport space. Repositions on scroll and resize. |
| Top | Appears above the target element. |
| Bottom | Appears below the target element. |
| Left | Appears to the left of the target element. |
| Right | Appears to the right of the target element. |
When set to Auto, the tooltip dynamically adjusts its position as the user scrolls or resizes the browser window to remain fully visible within the viewport.
Trigger Types
Configure when the tooltip appears by selecting a trigger type:
| Trigger | Fires when | Key config |
|---|---|---|
| exit_intent | The user's cursor moves toward the browser chrome, indicating intent to leave. | — |
| scroll_depth | The user scrolls past a specified percentage of the page. | percentage (0–100), url |
| time_on_page | The user has been on the page for a set duration. | delay (ms), url |
| side_button | The user clicks a persistent launcher button anchored to the side of the viewport. | buttonColor, buttonPosition |
| url_match | The current URL matches a pattern. | pattern, matchType |
| manual | Programmatically via DAP('showContent', tooltipId). | — |
If no trigger is configured, the tooltip is treated as manual — it appears only when invoked via the SDK or as part of a flow.
Tooltip Content
The rich text editor supports:
- Formatted text (bold, italic, lists, headings).
- Hyperlinks to external documentation or internal pages.
- Inline images for visual instructions.
- Custom HTML for advanced formatting.
Keep tooltip content concise. For longer explanations, consider using a slideout step or linking to external documentation.