guide.js's Introduction

guide.js

guide.js is a jQuery plugin that creates a clickable walkthrough of elements on your webpage

Installing

Ensure you have referenced a jQuery library:

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

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

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

Using

In you document ready, first attach the guide to the parent element you'd like to mask:

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

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

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

Then initiate the guide, manually or via a trigger event

guide.start();

Methods

.guide([options])

Attach the guide to the selector

Parameters:

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

guide.addStep(selector, introduction, options)

Add a step to the guide

Parameters:

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

guide.start()

Start the guide...

Roadmap

Abstract CSS (currently based on Bootstrap)
Remove jQuery dependency
Add keypress support

guide.js's People

Stargazers

Watchers

guide.js's Issues

Block underlying content

How about adding an invisible layer to block the underlying content while the guide is active! This will freeze the page and prevent the user from interacting with the actual content.

And thanks for the awesome work 👍

Interested in position options patch?

First of all, thank you!!! There are a tonne of site-guide plugins, and none of them ****ing work, due to the really nasty opacity overlay issues.

I need control of whether the tips occur left/right/top/bottom, which you don't have implemented yet. If I get that working, do you want the pull request?