HPI Tour Tourist.js allows for tours of HPI to be created. The interface of the tour can be changed for each step.

Tours can be added through Tour.js by adding the tour to Tour.tours and similar to the Search Tour, adding the tour as a function: ex)

 Tour.Search = function(options {
    self.tourSteps = [{step1}, {step2},....]
    self.tour = new Tourist.Tour({
        steps: steps
    });
 };

Tours can be activated in HPI through creating a Tour View Layout. For example in searchrouter.js a new Tour Layout is created when listening for "afterRender" and is made by creating a new Tour View Layout:

 var tour = new Tour.Views.Layout({ tours: [  
    name: nameOfTour,
    options: {}
    ]
 });
 self.layout.setView("#tour-outlet", tour);
 tour.render();

The current tour for Search can be altered through Tour.js. Each tour contains multiple step objects which look like this :

 {
  content: 'Welcome to my step',
  target: $('#something-to-point-at'),
  closeButton: true,
  highlightTarget: true,
  setup: (tour, options) {
    // do stuff in the interface/bind
  },
  teardown: function(tour, options) {
    // remove stuff/unbind
  }
 }

Steps have many object options that can be found here: https://github.com/easelinc/tourist; An example of a simple tour can be found here: http://easelinc.github.io/tourist/; ^_^