Docs
HomeSupportDashboard
DocsWebsites

Visual Editor (Chrome)

Build and edit tour steps by clicking elements on your live site with the Chrome extension.

The Visual Editor is a Chrome extension that opens a panel on your live website. Click + Add Step, click any element on the page, write the step text, and save — the selector is generated for you.

Desktop Chrome only
The Visual Editor runs in desktop Chrome (and Chromium browsers that support Chrome extensions). It isn’t available on mobile or tablet, and it’s for web sites only — for apps, use the Visual Inspector.

Install and connect

  1. Install the extension

    Open a walkthrough in the dashboard and click Visual Editor. If the extension isn’t installed yet you’ll be prompted to add it. The Visual Editor is currently in beta — if you can’t install it, contact us for access.

  2. Connect your account

    The first time, you’ll be asked to connect the extension to your Tooltip Tour account. A small sign-in window opens; once you’re signed in, it closes and the editor launches.

    You can check or change the connected account from the extension’s toolbar popup, which also has Disconnect.

Build steps by clicking

  1. Launch from the dashboard

    Click Visual Editor on a walkthrough. Your site opens in a new tab at the walkthrough’s page path (wildcards are stripped, so /blog/* opens /blog/) with the editor panel on the side.

  2. Click + Add Step, then click an element

    The element is outlined and its selector is shown with a ✓ Found badge when it uniquely matches.

  3. Write the step title and content

    Then click Update Step to add it to the list. Click any step in the list to edit it again.

  4. Preview and save

    Use Preview to run the tour on the page as visitors will see it. Save Walkthrough writes the steps back to the dashboard — and if the tour is open on the page, it updates live without a reload.

How selectors are generated

The editor picks the most stable selector it can find, in this order:

  1. The element’s id
  2. A data-testid, data-id, aria-label or name attribute
  3. A short path of tag names and meaningful classes, just long enough to be unique (state classes like is-active, hover or hidden are ignored)

Option 3 can break if your layout changes. For anything long-lived, add a data-tour attribute to the element and edit the step’s selector in the dashboard to use it — see Choosing selectors.

Starting from the extension popup

On any page of your site, click the Tooltip Tour icon in Chrome’s toolbar. The popup lists the walkthroughs that run On this page; click Edit ✦ to open one in the editor. If none match, it links you to the dashboard to create one.

Something missing or unclear? Tell us and we’ll fix the page.