TutorialJS is a better way to introduce your application or new features of an existing application.

It shows new users a step-by-step guide on how to use the various components of your project.

This library is based on Semantic UI elements and uses Semantic UI popups.

*This project is in alpha version (0.1.4).

You can contribute following the contribution guidelines in CONTRIBUTING.md. Also check issues to start contributing to this project.

JQuery

The main dependency is JQuery, it also use Semantic UI styles and scripts but those are included in this repository.

Add Semantic UI CSS components

<link rel="stylesheet" href="./tutorialjs/semantic_components/popup.min.css">
<link rel="stylesheet" href="./tutorialjs/semantic_components/transition.min.css">

Add Semantic UI Scripts

<script src="./tutorialjs/semantic_components/transition.min.js"></script>
<script src="./tutorialjs/semantic_components/popup.min.js"></script>

Include Tutorialjs script

<script src="./tutorialjs/tutorial.js"></script>

If you want to use Semantic UI button styles you can add the following:

<link rel="stylesheet" href="./tutorialjs/semantic_components/button.min.css">

In order to link html tags with Tutorialjs you must add a tutorial class to each tag you want to have a step tutorial. Also, you need to include a custom property to define the index of the step; tutorial-index="index:int".

<div class="tutorial" tutorial-index="0">
  
</div>

By default the start index is 0.

To set a title and text to the popup you have to add two more custom attributes:

tutorial-title="title"

tutorial-text="text"

<div class="tutorial" tutorial-index="0" tutorial-title="My title" tutorial-text="My text">
  
</div>

The following is a tutorial with three index steps:

<div class="tutorial" tutorial-index="0" tutorial-title="My title" tutorial-text="My text">
</div>

<div class="tutorial" tutorial-index="1" tutorial-title="My title" tutorial-text="My text">
</div>

<div class="tutorial" tutorial-index="2" tutorial-title="My title" tutorial-text="My text">
</div>

Once you have setup the HTML you are ready to run the tutorial. The simplest way to do it is using the start function of the Tutorial object, as follow:

Tutorial.start().then((success) => {
    console.warn(success)
}).catch((error) => {
    console.warn(error)
})

Tutorialjs runs the start function as a async promise so you must use then and catch to way for the response.

The correct way to set options is to assign them before you trigger the start function, here an example:

Tutorial.startIndex = 0;
Tutorial.endIndex   = 4;

Tutorial.start().then((success) => {
    console.warn(success)
}).catch((error) => {
    console.warn(error)
})

The Tutorialjs library is an open-sourced software licensed under the MIT License.