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 |