Tourist.js is a simple library for creating guided tours through your app. It's better suited to complex, single-page apps than websites. Our main requirement was the ability to control the interface for each step. For example, a step might need to open a window or menu, or wait for the user to complete a task. Tourist gives you hooks to do this.

Installation

The code is available via bower install tourist or on github. Once you have the code, you just need to include the javascript file. An optional CSS file with minimal styling is available as well.

<script src="tourist.js"></script>

<!-- Optional! -->
<link rel="stylesheet" href="tourist.css" type="text/css" media="screen">

Get started quickly

Specify steps explaining elements to point at and what to say. Tourist manages moving between your steps.

Example

Hey look at me!
No look at me!

Powerful

Tourist was designed for complex apps rather than websites. It's easy to:

  • control the interface for each step
  • move to the next step only after the user completes a specific task

Just use the setup() and teardown() functions in your step options.

Example

Dependencies

Tourist depends on Backbone and jQuery.

Tourist comes with the ability to use either Bootstrap popovers (default) or QTip2 tips, so you'll need either Bootstrap 3 CSS (only the CSS is necessary!) or QTip2 installed. You can write your own tooltip connector if you'd like.