node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org ยป




Constructor parameters

  • parent

    Element at which to insert the tutorial's elements

  • steps

    Object of steps, see Steps below

  • first

    The key of the first step

  • demoLabel, nextLabel, doneLabel

    Default labels for the "demo", "next", and "done" buttons


  • el

    Contains all the tutorial content.

  • closeButton

    Aborts the tutorial

  • header, content

    Contains the header and content specified in the current step, if defined.

  • instruction

    Includes the instruction property in the current step and a button to call the step's demo function if one is defined.

  • footer

    Contains the "next" button.


  • start()

    Start the tutorial.

  • end()

    End the tutorial.

  • goTo(step)

    If it's a string, go to that step in the steps object.

    If it's a function, it's evaluated and the result is passed back to goTo.

    If it's false, the step will not change, but the instruction element will get a data-zootorial-attention attribute.

    If it's null or not defined, the tutorial will end.


  • triggerEvent(eventName)

    Dispatch a custom event from the tutorial's el element.

  • createElement(tagAndClassNames, parent)

    Create an element (e.g. "button.hello") at a parent.

  • current

    The current step as it was passed into steps


  • onBeforeStart()

  • onStart()

  • onBeforeEnd()

  • onEnd()

  • onBeforeBeforeLoadStep()

  • onLoadStep()

  • onBeforeUnloadStep()

  • onUnloadStep()


Dispatched from el. You should probably reference these, e.g. addEventListener(tutorialInstance.startEvent, handler, false), in case the specific strings change

  • startEvent

  • endEvent

  • loadStepEvent

  • unloadStepEvent

  • abortEvent

"Step" objects


  • header

    String of HTML for a header

  • content

    String of HTML for content

  • instruction

    String of HTML for instructional content

  • demo()

    Function that shows the user what to do. Check out my ghost-mouse for a nice way to drive a dmeo.

  • attachment

    An array [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.

    If attachment is false, the dialog will not move from the last step's position.

  • progress

    The number of progress dots to fill up

  • arrow

    Set the data-zootorial-position property, which you can then style apropriately

  • block

    A CSS selector; block clicks to the matched elements until the step is exited.

  • focus

    A CSS selector; the matched element will be "highlighted" (everything around it will be dimmed).

  • actionable

    A CSS selector; matched elements will be given a data-zootorial-actionable property.

  • next

    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.


  • onBeforeLoad()

  • onLoad()

  • onBeforeUnload()

  • onUnload()