A jQuery plugin that creates a walkthrough guide for use in educating users about stuff on the page.
CoffeeScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Concierge is jQuery plugin that creates a walkthrough guide for use in educating users about stuff on the page. It basically just lets you set up a bunch of popovers that fire in order.

It was written in Coffeescript and requires Twitter's Bootsrap Tooltip and Bootstrap Popover plugins, and of course jQuery. The Bootstrap Transition plugin is required if you want animation support.


See the plugin page for a demo and example uses.



Concierge works by calling the plugin on a jQuery element that you want to scope actions to, then defining an array of steps.

var importantSteps = [
    element: $('#intro'),               // The Element the popover will be attached to
    title: "Look at this thing!",       // Title of the popover
    content: $('#intro-guide'),         // Can be text, HTML, or a jQuery object
    placement: 'bottom'                 // positioning of popover: top/bottom/left/right
    element: $('.bulk-upload'),
    title: "Bulk Upload",
    content: "For when one upload at a time simply isn't enough. You can click this button and upload lots of things!",
    placement: 'right'
    element: $('.save'),
    title: "Make your edits not disappear!",
    content: "Just as if you wrote them on actual paper, clicking this button will commit what you see to memory forever.",
    placement: 'bottom'
    element: $('.delete'),
    title: "Destroy the evidence!",
    content: "Want to make it all go away? Click here and destroy your hard work!",
    placement: 'top'

  steps: importantSteps,
  onStep: function(stepIndex, $el) {    // Callback on showing step.
    console.log(stepIndex);             // Access to current step index
    console.log("attached to:" + $el);  // and element popover is attached to.
  afterAll: function() {
    alert('ALL STEPS COMPLETED')        // Callback after last step
  nextText: "Next",                     // Text for the next button
  nextClass: "next",                    // Class for the next button
  nextEvent: "click",                   // Event for next action (mouseover, click, etc.)
  startingStep: 0,                      // Optional step to start on. Zero-based
  animation: true                       // Boolean for bootstrap animations