Get new jQuery plugins just once a week

×

fastuts

December 12, 2014

fastuts | jQuery plugin to display quick tutorials

fastuts is a jQuery plugin to display quick tutorials for your application or website.

Created by Guilherme Augusto Madaleno

Download

Example

fastuts-js jQuery plugin

tooltips

fastuts.js

What is it?

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


View the demo


Installation


How to use?

Fast way

Don't have time? Do it.

<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>
$('.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 out!

By Guilherme Madaleno Web Designer - Belo Horizonte - BH https://www.guimadaleno.com.br

fastuts

Related posts:

Ember js
jquery planetarium
Hashtegny

To install using Bower
bower install fastuts

fastuts-js jQuery plugin

http://jquer.in/wp-content/uploads/2014/12/fastuts-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever