Element at which to insert the tutorial's elements
Object of steps, see Steps below
The key of the first step
Default labels for the "demo", "next", and "done" buttons
Contains all the tutorial content.
Aborts the tutorial
content specified in the current step, if defined.
instruction property in the current step and a button to call the step's
demo function if one is defined.
Contains the "next" button.
Start the tutorial.
End the tutorial.
If it's a string, go to that step in the
If it's a function, it's evaluated and the result is passed back to
false, the step will not change, but the
instruction element will get a
null or not defined, the tutorial will end.
Dispatch a custom event from the tutorial's
Create an element (e.g. "button.hello") at a parent.
The current step as it was passed into
el. You should probably reference these, e.g.
addEventListener(tutorialInstance.startEvent, handler, false), in case the specific strings change
String of HTML for a header
String of HTML for content
String of HTML for instructional content
Function that shows the user what to do. Check out my
ghost-mouse for a nice way to drive a dmeo.
[X of tutorial, Y of tutorial, target selector, X of target, Y of target]. The tutorial dialog will be positioned so that the X and Y defined will match up with the X and Y of the target. E.g.
[0, 0, '.target', 0, 0] will align the top-left corners of the tutorial and the target, and
[0, 0.5, '.target', 1, 0.5] will stick the tutorial to the right side of the target, cenetered vertically.
false, the dialog will not move from the last step's position.
The number of progress dots to fill up
data-zootorial-position property, which you can then style apropriately
A CSS selector; block clicks to the matched elements until the step is exited.
A CSS selector; the matched element will be "highlighted" (everything around it will be dimmed).
A CSS selector; matched elements will be given a
If it's an object, keys are event/selector combos (e.g.
click button[name='complete-task']) and values are passed to the tutorial's
goTo method when that event is dispatched from that selector. No "next" button is drawn.
If it's a string, function,
null, or not defined, this is passed directly to the tutorial's
goTo method and either a "next" or "done" button is drawn in the footer.