Creating Tooltips

The BreakGround Chrome Extension lets you create standalone tooltips while browsing your live application. Tooltips are contextual help messages attached to specific UI elements — they appear independently, without requiring a flow to be active.

Creating a Tooltip

1. Click the BreakGround icon in the toolbar to open the popup.

2. From the main menu, click New under Tooltip.

3. Enter a name for internal reference and the tooltip body content.

4. Click Pick Element to activate the element selector. Hover over your application page — elements highlight as you move the cursor. Click the target element to capture its CSS selector.

5. Choose a position for the tooltip relative to its target element:

   Position	Description
   Auto	Automatically selects the best position based on available space.
   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.

6. Choose a trigger that controls when the tooltip becomes visible:

   Trigger	Behavior
   Page Load	Appears automatically when the page loads.
   Hover	Appears when the user hovers over the target element.
   Click	Appears when the user clicks the target element.
   Focus	Appears when the target element receives keyboard focus (useful for form fields).

7. Click Preview to see how the tooltip will look on the current page.

8. Click Save to create the tooltip. It is saved in DRAFT status; publish it from the BreakGround dashboard when ready.

Editing an Existing Tooltip

1. From the main menu, click Edit under Tooltip.
2. Select the tooltip from the list. The extension loads its current configuration.
3. Modify any fields and click Save to update.

Tips

• Use Hover or Focus triggers for tooltips on form fields — they appear exactly when the user needs guidance.
• After saving, open the BreakGround dashboard to configure audience targeting, display frequency, and page URL rules.