Customizable Tour Plugin With jQuery - Product Tour

A lightweight jQuery guided tour plugin which makes it easier to generate smart, customizable, mobile-friendly, step-by-step site/page/feature/product tours on the web app.

How to use it:

1. Include the necessary jQuery library (slim build is recommended) on the page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>

2. Create your own tour steps as these:

let tourOptions = {

  // options
  options : {
    
    // options here
    
  },
  // steps here
  tips    : [{
    title       : 'Title 1',
    description : 'Desc 1',
    image       : "1.jpg",
    selector    : 'h1', // target selector
    x           : 50, 
    y           : 100,
    offx        : 11,
    offy        : 0,
    position    : 'bottom', // position
    onSelected  : false // callback
  }, {
    title       : 'Title 2',
    description : 'Desc 2',
    image       : "2.jpg",
    selector    : 'h2',
    x           : 50, 
    y           : 100,
    offx        : 11,
    offy        : 0,
    position    : 'left',
    onSelected  : false 
  }, {
    title       : 'Title 3',
    description : 'Desc 3',
    image       : "3.jpg",
    selector    : 'h3',
    x           : 50, 
    y           : 100,
    offx        : 11,
    offy        : 0,
    position    : 'right',
    onSelected  : false 
  }]
};

3. Initialize the Product Tour plugin.

let tour = window.ProductTourJS;
tour.init(tourOptions);

4. Start the tour.

tour.start();

5. All possible options to customize your tour.

options : {
  
  // shows background overlay
  darkLayerPersistence : false,

  // custom text
  next                 : 'Next',
  prev                 : 'Previous',
  finish               : 'Okay!',

  // mobile threshold in pixels
  mobileThreshold      : 768
  
},

---

This awesome jQuery plugin is developed by Francesco-Rizzi. For more Advanced Usages, please check the demo page or visit the official website.