fastuts.js : jQuery Display Quick Tutorials Plugin

Hi!

Fastuts is is very outdated (sadly I have no time at this moment) and it has some bugs. I appreciate any pull requests fixing it.

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: '❮', 			callback: function (index, element) 			{ 				console.log('Clicked back button and moving to element ' + index); 			} 		}, 		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!'); 	}, });

Help?

Tweet me: @guimadaleno

License

GNU GPL

Peace out!

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