x icon


Guided tours for responsive web sites and applications.

I searched the web for a lightweight script that would allow me to provide users with a simple guided tour of a web app. Though there are some pretty nice tours out there I didn't see any that worked really well at any screen size.

Thus was born chaperone.js.



npm install chaperone


bower install chaperone


Create a tour object

tour = {
    // set up your phone and tablet breakpoints, be as generic as possible.
    // In the future it will except as many as you like and you may name them.. but for now.. just these two wil have to do
    breakpoints: {
        mobile: 640,
        tablet: 1024
    // If you want the tour to start as soon as the script is run, change this to true.
    autoStart: false,
    // If you don't like the standard throbber html you can put yours here
    throbberHTML: 'your fancy html here',
    // Again, don't like the standard? Replace it!
    chaperoneHTML: 'more fanciness',
    // What's the selector in the chaperoneHTML for adding the progress? ( 2 of 5 )
    progressSelector: '[data-hook="chaperone-progress"]',
    // and the text selector for the step message?
    textSelector: '[data-hook="chaperone-text"]',
    // how about the back button selector?
    backSelector: '[data-hook="chaperone-back"]',
    // don't forget the next button
    nextSelector: '[data-hook="chaperone-next"]',
    // and finally the finish button
    finishSelector: '[data-hook="chaperone-finish"]',
    // how fast should things move?
    animationTime: 300,
    // do you want it to repeat or just end?
    cycle: false,
    // Here's the meat. Add some steps to your tour!
    steps: [
            // if there isn't a target selector the default is 'body'
            // position can be none( absolute ), locked (absolute to the container of the target) or fixed (fixed to the window)
            position: 'locked',
            // when locked you can control the distance of the throbber from the target. This one controls the x axis.
            lockedLeft: 100,
            // and this one does the y
            lockedTop: -30,
            // This next one is required. It's gotta say something!
            message: 'Well... it's where we tell you what this thing is.',
            // If you need a callback when the throbber opens
            openEvent: openMenu,
            // or when it closes
            closeEvent: closeMenu,
            // here's where you decide what sizes to show this throbber on. It defaults to all of them
            shownOn: [ 'mobile', 'tablet' ]
          // another step
          // and another

Lauch that tour!

if ( !chaperone.shownSteps ) {
        chaperone.init( tour );
    } else {
        chaperone.placeSteps( chaperone.shownSteps );

Responsible parties

chaperone is a product of the SCSSC&S design process and was shepherded into existance by Ian with much help from Mike