Want to see pretty graphs? Log in now!
npm install zootorial
|1||downloads in the last week|
|127||downloads in the last month|
|Last Published By|
|Version||0.4.12 last updated 2 months ago|
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
contentspecified in the current step, if defined.
instructionproperty in the current step and a button to call the step's
demofunction 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
instructionelement will get a
nullor 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-mousefor 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-positionproperty, 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
goTomethod 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
goTomethod and either a "next" or "done" button is drawn in the footer.