Create a tour by moving a highlighted box between elements on the website
<p data-tour-desc="Element description"></p>
document.getElements('.tour').tour();
<p class="tour" data-title="Element description"></p>
document.getElements('.tour').tour({
description: 'data-title',
overlay: {
opacity: 0.5
},
accesskey: {
previous: 'up',
next: 'down'
}
});
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 |
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 |