onboard.js is a jQuery plugin that creates an elegant on-screen overlay for onboarding and product tours.

Originally created by Dozyatom, and inspired by intro.js, onboard.js does not use abstract z-index layering, and instead implements masks which allow normal interaction with your website without tampering with your markup.

$ bower install onboard.js

Ensure you have referenced a jQuery library installed:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Download onboard.js and onboard.css and add the following assets:

<link href="onboard.css" rel="stylesheet">
<script src="onboard.js"></script>

In you document ready, first attach the onboard to the body or other wrapping element you'd like to mask:

var onboard = $("body").onboard();

Then attach the steps to the elements to highlight, using jquery selectors:

onboard.addStep("#hello", "This step says hello");
onboard.addStep("#world", "This step says world");

Or instantiate onboard with predefined steps:

var onboard = $("body").onboard({
	steps: [{
		selector: '#element1',
		introduction: 'This is the first element'
	},{
		selector: '#element2',
		introduction: 'This is the second element'
	},{
		....
	}]
});

Then start the show!

onboard.start();

Attach the onboard to the selector

Parameters:

• options : Object (optional) Control the gap between the highlighted element and the mask with margin

Add a step to the onboard

Parameters:

• selector : jQuery selector identifying the DOM element to highlight
• introduction : The string to display
• stepOptions : Object with optional settings for margin and callback

Start the onboard...

• Convert jQuery to pure JS
• Add keypress support

Be sure to check out ng-onboard for an awesome angular wrapper!