The guided tour JS consists of two elements for each step: an indicator and a tooltip. An index is a flashing element positioned on a specific item on the page, cueing the user to click. Upon click, the associated tooltip is triggered which the user must then read and dismiss. Elements are dynamically positioned by initially setting their top and left CSS properties to -1000px. Once they have been initially rendered and measured, they are then positioned correctly. Animations on these CSS properties should be avoided.

A JavaScript object is passed to the TourGuideMixin to specify options, as well as the steps of your tour as an array. Each step in the collection represents one indicator and tooltip that a user must click through in the Guided Tours Js. Positions can be chosen from top-left, top-right, right, bottom-left, left, and centre. This defaults to centre. An optional callback may be passed as the second parameter to TourGuideMixin, which will be called once the current user has completed all the steps of your tour.

The function is intended to provide you with a method to asynchronously define your steps if they need to be fetched from a database etc. it takes a list of steps along with an optional callback function will be invoked. Upon including the mixin, it will be available to your component. At any point, this method can be called to retrieve information about the current user’s progress through the guided tour JS. This information can be used to save a user’s progress upon navigation from the page or application, allowing you to return them to their correct spot when they visit next during the start index option.

When new users visit your guided tour JS, you should demonstrate your product features using a step-by-step guide. Even when you develop and add a new feature to your product, you should be able to represent them to your users a user-friendly solution.