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)
Use click-to-advance when users should practice an action in your application, such as opening a tab or menu. The user clicks the actual highlighted app control, and that click advances the tour.
Require a click on an app control
Select the Tour Step itself, rather than a text or button component inside it.
In Placement, set the Tour Step HTML Selector to the actual app control. Choose a stable selector and confirm it matches one visible element in the live starting state. A captured snapshot does not prove that the selector still works in the application.
In the Tour Step toolbox, enable Step Progress > User clicks target to progress. This controls advancement within an existing tour; it is separate from the Tour Start setting that launches a tour on a click.
If the app click is required, remove the tooltip's Next button so users cannot skip the action. Removing that button also removes its attached automatic Trigger Click and Go to Tour Step actions. Keep Back when users need a return path.
Write a direct instruction, such as Click the Team tab. Use the backdrop, target border and tooltip arrow to draw attention to the app control. Choose styling that fits your product and verify the control remains clickable.
Make sure the following step targets an element available after the app action. Save the draft, publish or Update the intended test version, then restart the tour in the installed application. Confirm both that the app changes state and that the next tooltip appears.
When an automatic click is unreliable
First identify the last visible tooltip by title and the app state at that moment. Check whether its Next button has the intended action, whether the click selector exists in the live page, and whether the following step's anchor exists after the action. A selector with zero matches cannot click its target; multiple matches may select an unintended element. One match confirms only that an element exists, not that it is visible or that clicking it works.
If a real user click performs the intended action and practicing that action fits the tour's purpose, consider the click-to-advance setup above instead of repeatedly changing automatic-click selectors or action order. This is a change in the guided experience, not proof that the SDK has a bug or that action order caused the failure. Full page navigation and an in-page tab switch can behave differently.
Test the original failing transition, the rest of the tour and a fresh restart. Include another starting state or viewport when it could affect the target. Record saved settings, publication and observed live behavior separately. A click-to-advance success does not prove task completion or establish why the previous automatic click failed.
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].
Testing a tour launched from a checklist
Tour progress, Flow persistence and checklist completion are separate. The trigger-mode exceptions described above still apply. When a step depends on a tab or menu opening, verify that the actual app control is clicked before the next step needs its target. A Next button that only advances the tour does not perform that application action.
Test finish and early dismissal in the installed application. Do not assume the source checklist automatically reopens. If automatic return has not been configured and verified, provide a persistent Open checklist control and describe it in the final step. Check both tour tooltips and the minimized control against native modal layering.
See Build a checklist that launches contextual tours for a complete setup and live validation recipe.