tutorial.js

The best step-by-step feature introduction for your web sites, that's a promise!


download



call_split

Independent

Unlike the others, tutorial.js does not depend on any other library. Thanks to that, it's really small (3.5 KB of javascript and 3.9 KB of css).

settings

Easy to Use

Using it is easy, because it does not require any configuration options. All you need is to define the steps of your tutorial.

public

Compatible

Plays well with Firefox, Chrome, Opera, Edge and Safari. To run it in Internet Explorer you need to use polyfill like this one.



How to use it

tutorial.js can be added your website in three simple steps:

  1. Include tutorial.js and tutorial.css (or the minified versions for production) in your page. 
    <link href="/path/to/styles/tutorial.min.css" rel="stylesheet" />
<script src="/path/to/tutorial.min.js"></script>
  2. Create the steps of your tutorial, like this: 
    var steps = [
    {
        target: ".container .btn-large:first-child",
        html: "Hi, this is the very first step"
    }, {
        // another step
    }
];
  3. Initialize the tutorial with these steps and call start method. 
    tutorial(steps).start();
    tutorial.js itself does not require any configuration options, but you can customize each step to fulfill your needs. Find out more in the How it works section.


How it works

wrap_text

It's all about steps

Each step has it's target HTML element and html content, which will be displayed around the target.

av_timer

It's all about promises

Tutorial itself represents a promise, which is fullfiled when tutorial ends. Each step is also transformerd into a promise. The next step will not be invoked unless the previous step is fullfiled. Thanks to that you can create dynamic tutorials, whic can react to website changes.



Examples

chat_bubble Hello world

This is a very basic usage of the library. You can define steps while calling the tutorial method and you can start the tutorial right away. To keep things simple, we do not guess the right position for the tooltip, it's totally up to you.

play_arrow try it! code source
call Working with callbacks

Callbacks comes very handy when you do some async work, or you just want to have more control over the navigation between the steps.

play_arrow try it! code source
style Custom styles

With simplicity in mind, in order to change the visual appearance, all you need is to add your own css rules.

play_arrow try it! code source


Documentation

tutorial([steps])

Creates new instance of the turorial object.

Parameters
  • steps {Array} Array of tutorial steps.
Returns
  • tutorial {object}.
Example
var t = tutorial([{
    target: ".container .btn-large:first-child",
    html: "Hi, this is the first step"
}, {
    target: ".container h1",
    html: "The next step"
}]);
tutorial.start()

Starts the tutorial.

Returns
  • promise {Promise}.
Example
var promise = tutorial([/*...*/]).start();
tutorial

Object which describes tutorial.

Properties
  • steps {Array} Array of steps.
  • options {object} Object representing tutorial options.
  • container {HTMLElement} HTML element which is the container for the tutorial.
  • promise {Promise} Promise for the whole tutorial. When it is fullfiled the tutorial s finished.
Example
var t = tutorial([{
    target: ".container .btn-large:first-child",
    html: "Hi, you've just triggered the <b>demo</b> tutorial.",
});
t.start();
t.promise.then(function() {
    console.info("Tutorial is done");
});
step

Object which describes tutorial step.

Properties
  • target {string} (required) CSS selector string representing the target DOM element.
  • html {string} (required) HTML string representing the step content.
  • position {string} (optional) The step tooltip position. Defaults to "right". Valid values are: top, right, bottom, left.
  • onCreate {function} (optional) Function which is called before the step tooltip is created.
  • onNext {function} (optional) Function which is called before proceeding to the next step.
Example
var step = {
    target: ".container .btn-large:first-child",
    html: "Hi, you've just triggered the <b>demo</b> tutorial.",
    position: "top"
    onCreate: function() {
        console.info("onCreate");
    },
    onNext: function() { 
        console.info("onNext");
    }
}
step.onCreate([index, step, result])

Function which is called before the step tooltip is created.

Parameters
  • index {number} Index of the current step.
  • step {object} Instance of the current step.
  • result {object} The result from the previous step.
Example
var step = {
    target: ".container .btn-large:first-child",
    html: "Hi, you've just triggered the <b>demo</b> tutorial.",
    onCreate: function(index, step, result) {
        // ...
    }
}
step.onNext([index, step, resolve])

Function which is called before proceeding to the next step. This function is called automatically when user clicks the arrow button in the step's tooltip. This callback is not required and by default it proceeds to the next step immediately. However, if you implement this method, the next is postponed until the resolve function is called. The parameter passed to the resolve function will be passed to the next step's onCreate callback.

Parameters
  • index {number} Index of the next step.
  • step {object} Instance of the next step.
  • resolve {function} Function to resolve the current step's Promise.
Example
var step = {
    target: ".container .btn-large:first-child",
    html: "Hi, you've just triggered the <b>demo</b> tutorial.",
    onNext: function(index, step, resolve) {
        // Do some async work, like AJAX call and 
        // proceed to the next step after the 
        // AJAX call completes
    }
}