How to Change Twitter Bootstrap's Tour Template

Twitter Bootstrap Tour Template

After Zen, Bootstrap has been our favorite theme framework for Drupal sites we build. Bootstrap embraces a lot of interesting features with it. One among them is Tour, which could give a quick walk-through of various things on a site with a brief summary in a popup/tooltip style.

We leverage this to give a quick introduction to various administrative links and their purpose to Drupal admin.

I wanted to change the template of Tour content to meet our design. I would like to explain the same in this post.

The below piece of code from Bootstrap Tour favors showing Tour content.

Tour({
  storage: window.localStorage,
  basePath: path,
  template: "

\

 \

 \

 \

\

\
            "+prev+" \
            "+next+" \
        

" });

I forked this JS file to a custom module so it would become a custom code file and I shall be able to make changes as needed from there. This made way for making the needful changes to HTML of tour content.

Now I need to stop loading the contrib version of bootstrap-tour.js and replace that with a custom version. For the same, I used hook_js_alter() and hook_bootstrap_tour_alter().

/**
 * Implements hook_bootstrap_tour_alter()
 */
function mymodule_bootstrap_tour_alter(&$tour) {  
  // Load custom bootstrap-tour.js
  drupal_add_js(drupal_get_path('module', 'mymodule') . '/js/bootstrap-tour.js');  
}

/**
 * Implements hook_js_alter()
 */
function mymodule_js_alter(&$javascript) {  
  // Prevent loading bootstrap-tour.js from bootstrap_tour contrib module
  $js = drupal_get_path('module', 'bootstrap_tour') . '/js/bootstrap-tour.js';
  if (isset($javascript[$js])) {
    unset($javascript[$js]);
  }
}