You've created your first tour and it works. Great! But now you want to:
Make tours appear in front of other elements (or fix overlapping issues)
Focus user attention with visual backdrops
Let users pick up where they left off
Make tours feel more interactive by requiring users to click elements
Tooltip Positioning
To configure your tooltip, navigate to the right-hand Toolbox and find Tooltip Position:
Auto Positioning (Recommended)
Candu automatically positions tooltips based on available screen space
Adapts to different screen sizes (desktop, tablet, mobile)
Prevents tooltips from appearing off-screen
Manual Positioning
Set explicit position: Top, Right, Bottom, or Left
May require adjustments for different screen sizes
Arrow Positioning
Adjust arrow size in the styleguide
Hide arrow entirely if desired (0px)
Z-Index Control
Z-index determines which elements appear in front of others on the page. Think of it as layers, higher numbers appear on top. The default z-index for product tours is 4000, which works for most cases.
When you need to adjust z-index:
Tour tooltips appear behind modals or navigation
Page elements overlap your tour content
Third-party widgets cover your tours
Sticky headers or footers block tour steps
How to adjust:
Select your tour step
In the Toolbox, find Z-index field
Backdrop Options
Backdrops add a visual overlay that dims everything except your tour tooltip, focusing user attention. You can:
Toggle backdrop on/off
Set color and opacity
Adjust border color and width
Important: If you set a backdrop, users can click the dimmed area to exit and the tour will be dismissed.
Progress Saving
Control whether users pick up where they left off or restart from the beginning each time. When enabled, users who leave mid-tour will resume where they left off.
To toggle user progress on/off:
Select your tour step
In the Toolbox, find Tour Progress option
Toggle on or off
Note: Progress is automatically disabled for tours triggered by button clicks in other Candu content, programmatic triggers, and trigger clicks on page elements. These tours are designed to restart each time.
Step Progress (Click to Advance)
Require users to click the highlighted element before advancing to the next step. This creates a hands-on learning experience where users practice the actual workflow instead of just clicking "Next."
To toggle step progress on/off:
Select your tour step
In the Toolbox, find Step Progress option
Toggle on or off
Trigger Click Functionality (Automated Click)
Make Candu automatically click elements on the page during a tour step. This is useful for opening menus, triggering interactions, or demonstrating specific actions without requiring user input.
To set up trigger click on a new step:
Add a new step
Select the Tour Step HTML Selector
Check "Trigger a click"
Add the selector of the element you want clicked (or copy/paste the HTML selector if it's the same one from your tour step)
To add trigger click to an existing step:
Click the three dot menu on your step in the tour menu
Click the lightning icon
Click the element on the snapshot where you want the trigger to happen
Need help? Reach out via chat or email us at [email protected].