A Simple, Lightweight Library for Creating Guided Product Tours for Your Web App

tourguide.js is a javascript library that helps you create an interactive step-by-step tour to guide your visitor through the new features and featured content on the app.

More Features:

  • The page scrolls smoothly to the current step.
  • It automatically scrolls the page to the original position when the round ends.
  • It allows you to download the steps from an external data source.
  • Preload the image.
  • Compliant with Vanilla JavaScript, Angular, React, and Vue.js.
  • Lots of options, styles, and events.

Bootstrap Inspired Step-by-step Wizard Modal Plugin | jQuery FlowDialog

How to make use of it:

To get began, insert the stylesheet tourguide.css and JavaScript tourguide.js into the doc.

<link rel="stylesheet" href="tourguide.css">
<script src="tourguide.min.js"></script>

Initialize the tourguide.js and create a brand new tour instance.

var myTour = new Tourguide();

Define steps within the data-tour attribute.

<h1 data-tour="step: 1; title: Page Title; image: 1.jpg; content: This is page title">Tour example</h1>

Start the tour and finished.


You may config the tourguide.js to load step information from a JSON file.

// data.json
    "selector": "Select 1",
    "step": 1,
    "title": "Step 1",
    "content": "Step 1 content",
    "image": "1.jpg"
    "selector": "Select 2",
    "step": 2,
    "title": "Step 2",
    "content": "Step 2 content",
    "image": "2.jpg"
    "selector": "Select 3",
    "step": 3,
    "title": "Step 3",
    "content": "Step 3 content",
    "image": "3.jpg"
  // ... 
var myTour = new Tourguide({
    src: "/path/to/json.json"

// or
var steps= []
var myTour = new Tourguide({
    steps: steps

All potential choices with default values.

var myTour = new Tourguide({
    root: "body",
    selector: "[data-tour]",
    animationspeed: 300,
    padding: 5,
    steps: null,
    src: null,
    restoreinitialposition: true,
    preloadimages: false,
    request: {
      "options": {
        "mode": "cors",
        "cache": "no-cache"
      "headers": {
        "Content-Type": "application/json"

Callback features.

var myTour = new Tourguide({
    onStart: function(options){...},
    onStop: function(options){...},
    onComplete: function(){...},
    onStep: function(currentstep, type){...},
    onAction: function(currentstep, e){...}

API strategies.

// starts the tour
myTour.start(2); // starts at step 2

// stops the tour

// goes to the next step

// backs to the previous step

// goes to a specific step

Slider-style Guided Tour, Tourguide.js Plugin/Github

See Demo And Download

Official Website(LikaloLLC): Click Here

This superior jQuery/javascript plugin is developed by LikaloLLC. For extra Advanced Usages, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…


Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…


A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…


First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…


Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…