A faster way to display quick tutorials for your application or website
JavaScript CSS
Latest commit 16f298b Feb 13, 2015 @guimadaleno Updating README
Permalink
Failed to load latest commit information.
README.md
bower.json
demo.html
fastuts.css
fastuts.js
fastuts.min.js

README.md

fastuts.js

What is it?

A faster way to display quick tutorials for your application or website

  • It's tiny! Just 5KB;
  • Easy to customize;
  • Allows callback functions;
  • jQuery required.

View the demo


Installation

  • Install via Bower bower install --save fastuts
  • Download via GitHub

How to use?

Fast way

Don't have time? Do it.

  • 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.
<div class="fastuts" data-fastuts-tip="Put a short tip right here" data-fastuts-order="2">
    <h4>Some random content one</h4>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
</div>
<div class="fastuts" data-fastuts-tip="Another tip" data-fastuts-order="1">
    <h4>Some random content two</h4>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
</div>
  • Now, add this script below to any event or function you wish:
$('.fastuts').fastuts();

And that's all! Enjoy your content in your table.


Complete mode

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:
        {
            text: 'Close',
            callback: function ()
            {
                console.log('Clicked close button');
            }
        },
        prev:
        {
            text: '&#10094;',
            callback: function (index, element)
            {
                console.log('Clicked back button and moving to element ' + index);
            }
        },
        next:
        {
            text: '&#10095;',
            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!');
    },
});

Help?

Tweet me: @guimadaleno


License

GNU GPL

Peace!