Bootstrap Tour won't load on a Modal

Question

I have implemented bootstrap tour on my project. I have tried to load it on a modal window but nothing is displayed. Below is my code :

<script type="text/javascript">
            $(document).ready(function () {
                // Instance the tour
                var tour = new Tour({
                    steps: [
                        {
                            element: "#facility_name_div",
                            title: "Select Facility",
                            content: "Change the  Displayable Facility. "
                        }
                    ]});

// Initialize the tour
                tour.init();

// Start the tour
                tour.start();
            });
        </script> 

And my modal window is below:

    <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">    
    <!-- Modal content-->
    <div class="modal-content">
      <form class="query_other_order_no_form" id="query_other_order_no_form">    
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Select Facility : </h4>
        </div>
        <div class="modal-body">
          <div class="box-body">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <div id="facility_name_div"></div>
                  <label>Please Select a Facility : </label>
                  <select class="form-control select2 c_bpartner_name" id="c_bpartner_name" required="" style="width: 100%;">
                    <option selected="selected" value="">Please Select One : </option>
                  </select>
                </div>
                <!-- /.form-group -->

              </div>
              <!-- /.col -->

            </div>
            <!-- /.row -->
          </div>
          <!-- /.box-body -->
        </div>
        <div class="modal-footer">
          <!--<button type="button" id="bpartner_query_btn" class="btn btn-default bpartner_query_btn pull-left">Query</button>                                                             <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>-->
        </div>
      </form>
    </div>
  </div>
</div>

Please can you advise on how I can set up the bootstrap tour appear on the modal window?

Answer 1

I suspect you may be running into an issue of your modal not being visible when the step is firing. However I would need more context to make sure. One way you can check is to use one of the really helpful bits of Bootstrap Tour which is the debug mode. This can be added to your tour object like this:

var tour = new Tour({
                debug: true,
                steps: [
                    {
                        element: "#facility_name_div",
                        title: "Select Facility",
                        content: "Change the  Displayable Facility. "
                    }
                ]});

By adding this line, your tour will print out what it's doing in the browser console. The tour will print out that it's skipping a step because the element isn't visible which is super helpful.

I recently ran into this visibility issue and this is a workaround (admittedly not the greatest) that I added to the onNext function of the previous step in my tour. I am totally open to a better workaround for this:

onNext: function(tour){
                tour.end();
                setTimeout(function(){
                    tour.restart();
                    tour.goTo(4); //substitute your step index here
                }, 500); //change this to as little as your load time allows
            }

Another thing to be mindful of is your z-index of both your modals and the tour which utilizes Bootstrap's popover functions. If the modal is visible and your debug mode shows that the step is currently shown, you may have to adjust the z-indexes of one or the other to make sure that the modal isn't hiding the popover.

Answer 2

A simple solution is to init and start your tour only once the modal is shown... With your code this would give :

<script type="text/javascript">
    $(document).ready(function () {
        // Instance the tour
        var tour = new Tour({
            steps: [
                {
                    element: "#facility_name_div",
                    title: "Select Facility",
                    content: "Change the  Displayable Facility. "
                }
            ]});

        $('#myModal').on('shown.bs.modal', function (e) {
            // Initialize the tour
            tour.init();

            // Start the tour
            tour.start();
        });

    });
</script> 

Answer 3

In the bootstrap 3 and Bootstrap Tour 0.11 there is a CSS conflict with fade class (put the opacity on 0 "zero") . Try this CSS:

.tour-tour.fade.in{
    opacity: 1;
}

Answer 4

You need to set Popever's index. The tour will be visible when it does.

Example:

.popover[class*=tour-]{
        z-index:100503 !important;
    }