Joyride

Joyride gives users a tour of your site or app when they visit.

Some awesome part of your site!

Build Joyride with HTML

At the bottom of your page but inside of the body, place either an ol or ul with the data-joyride attribute. This list will contain all of the stops on your tour. To associate the tour stops with an item on your page, make sure the ID and data-id match between the two. If you do not associate an id, the tour stop will take on a modal style, positioning itself in the middle of the screen.

<!-- At the bottom of your page but inside of the body tag --><olclass="joyride-list"data-joyride><lidata-id="firstStop"data-text="Next"data-options="tip_location: top; prev_button: false"><p>Hello and welcome to the Joyride <br>documentation page.</p></li><lidata-id="numero1"data-class="custom so-awesome"data-text="Next"data-prev-text="Prev"><h4>Stop #1</h4><p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p></li><lidata-id="numero2"data-button="Next"data-prev-text="Prev"data-options="tip_location:top;tip_animation:fade"><h4>Stop #2</h4><p>Get the details right by styling Joyride with a custom stylesheet!</p></li><lidata-button="End"data-prev-text="Prev"><h4>Stop #3</h4><p>It works as a modal too!</p></li></ol>

We Add Some HTML with JS

To make Joyride really easy to use, we built its container and tour element inside the JS. This can make it hard to know what to target for styling purposes in some cases. To help this process go smoothly, here's what the output looks like with the appropriate classes to target for styling:

<!-- Here is the markup our JS creates for you --><divclass="joyride-tip-guide"><spanclass="joyride-nub top"></span><divclass="joyride-content-wrapper"><p>Hello and welcome to the Joyride documentation page.</p><ahref="#"class="small button joyride-next-tip">Next</a><ahref="#close"class="joyride-close-tip">&times;</a></div></div>

## Accessibility

This component is keyboard accessible, but not fully screen reader accessible. Stay tuned for updates in future releases.

Available SCSS Variables

We've included a bunch of variables that you'll be able to use if you're into getting SASSy with things.

Joyride does not initialize on page load like the rest of the plugins. You need to call start to get it to load.

$(document).foundation('joyride', 'start');

Then, you'll need to add a data-joyride to make the JS work properly on that element. It looks something like this:

<oldata-joyride>
...
</ol>

Optional Javascript Configuration

You can either set these options in a data-options attribute in the markup, data-options="option: value; option2: value" syntax, or pass in on initialization. Configurations that are objects, functions, or arrays can only be passed in during intitialization.