Joyride

Define Your Tour Stops

Joyride will work with any element in your markup, the only requirement is that the element must have a unique id to tell the joyride plugin it is a stop of the tour. You will use the id or class of each "stop" when you create your tour outline in the next step. In case of classes, Joyride will select the first matching element.

    /* Joyride can be attached to any element with a unique ID or class, in any order */
    <h3 id="yourHeaderID"></h3>
    <p class="your-paragraph-class"></p>
    <a id="yourAnchorID" href="#url"></a>

Create Your Tour Outline

Create an outline list of your tour stops in a <ol> element and be sure to give that an id of your choice. You'll need to add this id into the options a little later. For each stop of the tour add an <li> element with a "data-id" attribute. The value of the data-id attribute should be the ID of the html element you want as the stop. This <ol> element should be placed right before you close the body of your markup.

There are some options to consider when creating the steps of your tour. First, you can control the text of each button in the tour. To do this, simply add "data-button" to your <li> and type out what the button should say. Second, you can add custom classes to any or all of the <li>’s. This enables you to control each step with complete granularity.

If a data-class or data-id attribute is not specified, then the tooltip is attached to the body of the page as a modal window.

        /* Each tip is set within this <ol>. */
        /* This creates the order the tips are displayed */
        <ol id="chooseID">
        /* data-id needs to be the same as the parent it will attach to */
        <li data-id="newHeader">Tip content...</li>

        /* This tip will be display as a modal */
        <li>Tip content...</li>

        /* using 'data-button' lets you have custom button text */
        <li data-class="parent-element-class" data-options="tipLocation:top;tipAnimation:fade" data-button="Second Button">Content...</li>

        /* you can put a class for custom styling */
        <li data-id="parentElementID" class="custom-class">Content...</li>
        </ol>
    

Start the Engine

To make sure your Joyride goes smoothly, start the engines by including the above code before the closing </body> element of your page. There are also a handful of options that you can set to customize the experience for your passengers.

        /* Launching joyride when to page is loaded */
        <script>
        $(window).load(function() {
          $("#chooseID").joyride({
            /* Options will go here */
          });
        });
        </script>