Page Comparison

Configure Tutorial

• title: The main heading for the entire tutorial, providing a clear and concise name for the tutorial's purpose.

• description: A brief overview of what the tutorial covers and its significance, helping users understand the context and importance of the tutorial.

• steps: An array of step configurations within the tutorial, each detailing a specific part of the process and guiding the user through various interactions. Each step includes properties such as target, title, content and other configuration options.

...

Configure Steps

• target: Defines the CSS selector for the element to be highlighted by the tooltip.

• title: The heading for each step, providing a brief overview of what the step is about.

• content: The description displayed in the tooltip, guiding the user on what action to take or information to understand.

• spotlightClicks: Allows the user to click on the highlighted element within the spotlight, making it interactive.

• placement: Positions the tooltip relative to the targeted element. Possible values include top, bottom, left and right.

• disableOverlay:Disables the overlay background that typically dims the area outside the tooltip. When set to true, this property focuses the user's attention solely on the highlighted element without any visual distractions from the surrounding area.

• hideBackButton: Hides the Next button for the current step, preventing the user from manually advancing to the next step.

• hideNextButton: Hides the Back button for the current step, preventing the user from navigating to the previous step.

• data.autoNextOn: Specifies the CSS selector of the element that, when it appears on the screen, triggers the automatic transition to the next step in the tutorial.

Auto transition steps

To automatically transition to the next step when an element appears on the screen, you can add the autoTransition property to the step configuration. This property should be an object with the following properties:

• autoNextOn: The selector of the element that should trigger the transition.

Example usage:

{
  target: 'selector',
  title: 'Title',
  data: {
    autoNextOn: 'next selector',
  }