Fastuts.js - Display quick tutorials for your application

Download Demo
This Jquery Plugin fastuts.js is a faster way to display quick tutorials in your application or website using jQuery.
It’s tiny! Just 5KB;
Easy to customize;
Allows callback functions;
jQuery required.
1. INCLUDE CSS AND JS FILES


2. HTML
First off, add the class fastuts to all the elements you want to introduce to people, as the example below. Also, it’s required to add the attribute data-fastuts-tip. Optionally, you can add a sequence number to your presentation using the attribute data-fastuts-order.

Some random content one

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

Some random content two

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

3. JAVASCRIPT
$(‘.fastuts’).fastuts();
4. OPTIONS
Would you like to fully customize fastuts.js? Here’s all the options:
$(‘.fastuts’).fastuts
({
settings:
{
spacing: ’40px’,
time: 0.2,
autoScroll: true,
allowKeys: true
},
buttons:
{
close:
{
class: ‘.fastuts-button-close’,
text: ‘Close’,
callback: function ()
{
console.log(‘Clicked close button’);
}
},
prev:
{
class: ‘.fastuts-button-prev’,
text: ‘❮’,
callback: function (index, element)
{
console.log(‘Clicked back button and moving to element ‘ + index);
}
},
next:
{
class: ‘.fastuts-button-next’,
text: ‘❯’,
callback: function (index, element)
{
console.log(‘Clicked next button and moving to element ‘ + index);
}
}
},
overlay:
{
color: ‘rgba(0,0,0,0.8)’,
allowEscapeKey: true,
onClose: function ()
{
console.log(‘Clicked on overlay to close’);
}
},
onReady: function ()
{
console.log(‘Fastuts ready!’);
},
});