Skip to main content

How to change Twitter Bootstrap's 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 in 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.

  storage: window.localStorage,
  basePath: path,
  template: "<div class='popover tour'> \
    <div class='arrow'></div> \
    <h3 class='popover-title'></h3> \
    <div class='popover-content'></div> \
    <nav class='popover-navigation'> \
        <div class='btn-group'> \
            <button class='btn btn-default' data-role='prev'>"+prev+"</button> \
            <button class='btn btn-default' data-role='next'>"+next+"</button> \
        </div> \
        <button class='btn btn-default' data-role='end'>"+endtour+"</button> \
    </nav> \

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 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])) {