Tour.js

Create a tour by moving a highlighted box between elements on the website

Setting up

Simple

<p data-tour-desc="Element description"></p>

document.getElements('.tour').tour();

Additional 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
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
keyAccess.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