Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 6304d994f4
Fetching contributors…

Cannot retrieve contributors at this time

68 lines (49 sloc) 2.481 kb


An interactive guide for web page elements using jQuery and CSS3.


  1. Add references in your code to pageguide.js, jQuery & pageguide.css
  2. Add a document ready callback to setup the page guide
  3. Add a simple <ul> to the bottom of the pages you want the pageguide to appear on.
  4. Customize the page guide tour title.

An example:

Step 1 - Add pageguide.js

Add <script src="pageguide.js"></script> to the bottom of your html document, right before your closing </body> tag.

We provide both the standard js as well as a minified version.

Step 2 - Add pageguide.css

Add <link rel="stylesheet" href="stylesheets/pageguide.css"> to the header of your html document.

We provide a css file as well as a minified version. Alternatively, we use LESS CSS at Tracelytics, so we provide that as well.

Step 3 - Add setup code

Add the following block of JavaScript to your html document:

$(document).ready(function() {{ /* optional preferences go here */ }); });

Step 4 - Choose the elements that you want included in the page guide.

pageguide.js matches the first occurrence of the selector you specify in the <ul> you put on your pages in the next step.

Step 5 - Add the pageguide.js <ul> near the bottom of your pages.

<ul id="tlyPageGuide" data-tourtitle="REPLACE THIS WITH A TITLE">
  <li class="tlypageguide_left" data-tourtarget=".first_element_to_target">
      Here is the first tour item description. The number will appear to the left of the element.
  <li class="tlypageguide_right" data-tourtarget="#second_element_to_target">
      Here is the second tour item description. The number will appear to the right of the element.
  <li class="tlypageguide_top" data-tourtarget=".third_element_to_target">
      Here is the third tour item description. The number will appear above of the element.
  <li class="tlypageguide_bottom" data-tourtarget="#fourth_element_to_target">
      Here is the fourth tour item description. The number will appear below of the element.

See it IRL:


Bugfix? Cool new feature? Alternate style? Send us a pull request!

Jump to Line
Something went wrong with that request. Please try again.