Easy Interactive Guided Tour Plugin - jQuery aSimpleTour

aSimpleTour is a tiny and easy jQuery tour plugin to generate a pretty nice, tooltip-based guided tour of various elements on your web application.

More features:

• Auto start or not.
• Allows you to customize the position & appearance of the tour tooltip & control panel.
• Smoothly scrolls to the target element. Requires jQuery scrollTo plugin.
• Highlights the current step with a configurable overlay.
• Keyboard navigation.
• Custom welcome message.
• Dynamic data rendering.

How to use it:

1. Put the jquery.aSimpleTour.min.js script after the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.aSimpleTour.min.js"></script>
<script src="/path/to/jquery.scrollTo.js"></script>

2. Define your guided tour in an array of JS objects as follows:

var myData = [{
    // target element
    element: '.element1',

    // content displayed in the tooltip
    tooltip: 'Step 1',

    // position of the tooltip
    // T, B, L, R, TL, TR, BL, BR, LT, RT, LB, RB
    position: 'T',

    // content displayed in the control panel
    text: 'Any HTML Content Here'
}, {
    element: '.element2',
    tooltip: 'Step 2',
    position: 'TL',
}, {
    element: '.element3',
    tooltip: 'Step 3',
    position: 'T'
}]

3. Start the tour and done.

$.aSimpleTour({
  data: myData
});

4. Start the tour manually.

$.aSimpleTour({
  data: myData,
  autoStart: true
});

5. Customize the appearance of the tour.

$.aSimpleTour({
  data: myData,
  buttons: {
    next  : { text : 'Next', class : ''},
    prev  : { text : 'Previous', class: '' },
    start : { text : 'Start', class: '' },
    end   : { text : 'End', class: '' }
  },
  controlsCss: {
    background: 'rgba(8, 68, 142, 0.80)',
    color: '#fff'
  },
  tooltipCss: {
    background: 'rgba(0, 0, 0, 0.70)',
    color: '#fff'
  }
});

6. Customize the background overlay.

$.aSimpleTour({
  data: myData,
  useOverlay: true,
  overlayZindex: 10
});

7. Enable/disable the keyboard navigation. Default: true.

$.aSimpleTour({
  data: myData,
  keyboard: false
});

8. Customize the position of the control panel: TL, TR, BL, BR.

$.aSimpleTour({
  data: myData,
  controlsPosition: 'TR'
});

9. Customize the welcome message.

$.aSimpleTour({
  data: myData,
  welcomeMessage: '<h2>Tour</h2><p>Welcome to the Tour Plugin</p>'
});

---

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