Setup

Simple

<p class="tour" data-tour-desc="Element description"></p>
document.getElements('.tour').tour();

With options

<p class="tour" data-title="Element description"></p>
document.getElements('.tour').tour({
  description: 'data-title',
  overlay: {
    opacity: 0.5
  },
  accesskey: {
    previous: 'up',
    next: 'down'
  }
});

Options

Name Type Default Description
classPrefix string tourjs Prefix for the CSS class
description string data-tour-desc Property from which to fetch the description
offset integer 5 Additional padding between the highlighter and the highlighted element
overlay.opacity integer 0.3 Overlays opacity
tip.opacity integer 1.0 Tips opacity
tip.position string Position. See Element.Position for reference
tip.follow boolean false Should the tooltip follow the highlighter
tip.duration integer 300 Duration of the tip animation
fx.duration integer 500 Duration of the highlighting animation
fx.transition string/object sine:out Transition type for the highlighting animation
accesskey.activate fn Function triggering the activation - see source for details
accesskey.start string start Event to start the tour
accesskey.next string right Next slide
accesskey.previous string left Previous slide
accesskey.end string esc Close tour

Events

Name Provides Description
onReposition outline, overlaySlices Fires when the highligher gets repositioned
onFirst outline, overlaySlices Fires when highlighter is currently on the first slide
onLast outline, overlaySlices Fires when highlighter is currently on the last slide

Requirements

This version of Tour.js requires MooTools 1.4+. Future version of Tour.js will be framework-agnostic.

Source code

All efforts have been made to keep the source as clean and readable as possible. Source on Github

License

Tour.js is released under an MIT License, so do with it what you will.