jQuery Feature Tours Plugin - Joyride

Joyride is a cool and mobile-friendly jQuery plugin for easily and quickly creating feature tours for your website or web application using small tooltips.  You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.

See also:

• Simple Step By Step Site Tour Plugin - Intro.js
• Crumble - Web Site Feature Tour Plugin
• Feature Walkthrough Plugin For jQuery and YUI - introtour-ui

Basic Usage:

1. Include necessary CSS files on your page

<link rel="stylesheet" href="joyride-2.0.3.css">
<link rel="stylesheet" href="mobile.css">

2. Markup an element with a unique ID to tell the plugin it is a stop of the tour

<h2 id="numero1" class="so-awesome">Point Out Those New Features!</h2>
...
<h3 id="numero2">Customize Each Stop Along the Way</h3>
...

3. Tip Content

<ol id="joyRideTipContent">
      <li data-class="so-awesome" data-text="Next" class="custom">
        <h2>Stop #1</h2>
        <p>...</p>
      </li>
      <li data-id="numero2" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
        <h2>Stop #2</h2>
        <p>...</p>
</ol>

4. Include necessary javascript files

<script src="jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="modernizr.mq.js"></script>
<script src="jquery.joyride.js"></script>

5. Call the plugin and done.

$('#joyRideTipContent').joyride({
  postStepCallback : function (index, tip) {
    if (index == 2) {
      $(this).joyride('set_li', false, 1);
    }
  }
});

6. All default options.

/**
 * Autostart the joyride on page load.
 * @option
 * @example false
 */
autostart: false,

/**
 * Speed with which the page scrolls to the next stop.
 * @option
 * @example 1000
 */
scrollSpeed: 1000,

/**
 * Enable navigation via keyboard.
 * @option
 * @example true
 */
keyboardAccess: true,

/**
 * If the joyride elements should be closable.
 * @option
 * @example true
 */
closable: true,

/**
 * Text for the next button.
 * @option
 * @example 'Next'
 */
nextText: 'Next',

/**
 * Text for the previous button.
 * @option
 * @example 'Previous'
 */
prevText: 'Previous',

/**
 * Text for the close button (for accessibility purposes).
 * @option
 * @example 'Close'
 */
closeText: 'Close',

/**
 * Whether to show next button.
 * @option
 * @example true
 */
showNext: true,

/**
 * Whether to show previous button.
 * @option
 * @example true
 */
showPrev: true,

/**
 * Vertical offset for tooltips (see tooltip plugin configuration).
 * @option
 * @example true
 */
vOffset: 10,

/**
 * Horizontal offset for tooltips (see tooltip plugin configuration).
 * @option
 * @example true
 */
hOffset: 12,

/**
 * Offset while scrolling the window.
 * @option
 * @example 50
 */
scrollOffset: 50,

/**
 * Position of the tooltips (see tooltip plugin configuration).
 * @option
 * @example true
 */
position: 'top center',

/**
 * Templates for the close button.
 * @option
 * @example '<a href="#close" class="close" data-joyride-close><span aria-hidden="true">&times</span><span class="show-for-sr"></span></a>'
 */
closeButton: '<a href="#close" class="close" data-joyride-close><span aria-hidden="true">&times</span><span class="show-for-sr"></span></a>',

/**
 * Templates for the next button.
 * @option
 * @example '<button class="button" data-joyride-next></button>'
 */
nextButton: '<button class="button" data-joyride-next></button>',

/**
 * Templates for the pevious button.
 * @option
 * @example '<button class="button" data-joyride-prev></button>'
 */
prevButton: '<button class="button" data-joyride-prev></button>'

Change log:

v3.0.0 (2017-03-10)

• Better screen edge detection

v2.0.3 (2013-04-03)

• Better screen edge detection

---

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