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 TOOLTIP step 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

1. Navigate to Content > Tooltips in the dashboard.
2. Click Create New Tooltip.
3. Enter a name for internal reference.
4. Select the site the tooltip belongs to.
5. Enter the tooltip text content in the content field.
6. Enter the CSS selector of the target element. You can obtain the selector using the Chrome Extension.
7. Choose the tooltip position and element trigger.
8. Configure the display trigger, targeting, and scheduling from the respective tabs.
9. Click Save to create the tooltip in DRAFT status, 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.

Element Trigger

The element trigger controls how a user activates the tooltip relative to its target element:

Trigger	Description
Always	The tooltip is always visible when the target element is on the page.
Hover	The tooltip appears when the user hovers over the target element.
Click	The tooltip appears only when the user clicks the target element.

Display Trigger

The display trigger controls when BreakGround attempts to render the tooltip on the page. Configure this under the Trigger tab:

Trigger	Fires when	Key config
URL Match	The current URL matches a pattern.	pattern, matchType
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)
Time on Page	The user has been on the page for a set duration.	delay (milliseconds)
Manual	Programmatically via DAP('showContent', tooltipId).	—

If no trigger is configured, the tooltip defaults to URL Match with a wildcard pattern, meaning it shows on all pages.

Scheduling

Configure when the tooltip is active using the Scheduling tab:

Field	Description
Publish At	Set a future date and time for the tooltip to activate automatically. Leave empty to publish immediately when you click Publish.
Expires At	Set a date and time after which the tooltip is automatically deactivated. Leave empty for no expiry.

Times are interpreted in your local timezone. A tooltip with both fields set is only active during the specified window.

Tooltip Content

The content field accepts plain text. Keep tooltip content concise. For longer explanations, consider using a slideout announcement or linking to external documentation.