Joyride

Joyride plugin for Foundation 6.

Basic Joyride

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>

Trigger start

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.

Open issues

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

  1. First

    This is the default one without settings

  2. Second

    This is the default one with custom texts

  3. Third

    This one isn't closable

  4. Fourth

    If no target is specified, you create a modal.

  5. Fifth

    Your ride ends here!