Joyride makes use of the Tooltip component, so it is required to also have it included in your project.
You can define your Joyride stops by creating a HTML list and adding the `data-joyride` attribute. Make sure that the
data-target attribute within the
li-tags matches the id of the element you want to address.
<ol data-joyride data-autostart="true" id="docs-joyride"> <li data-target="#basic-joyride"> <h3>First</h3> <p>This is the default one without settings</p> </li> <li data-target="#sass-reference" data-next-text="Weiter" data-prev-text="Zurück"> <h3>Second</h3> <p>This is the default one with custom texts</p> </li> <li data-target="#js-class" data-position="bottom" data-closable="false"> <h3>Third</h3> <p>This one isn't closable</p> </li> <li> <h3>Fourth</h3> <p>If no target is specified, you create a modal.</p> </li> <li data-target="#trigger-start"> <h3>Fifth</h3> <p>Your ride ends here!</p> <button class="button success" data-joyride-close>OK, thanks!</button> </li> </ol>
You can either have the Joyride start on page load, or by defining a button, etc. To enable auto start, set the
data-autostart attribute of the list to true. A custom trigger can be defined by adding the
data-joyride-start attribute pointing at the Joyride instance you want to start.
The following things are still open:
- Some sort of cookie usage to remember if the user already had a ride
- Proper testing
- Example as Markdown
- Align Gulp tasks and implement watching