Bootstrap Tour Unable to work on dropdown

Question

I am using http://bootstraptour.com/ to do a tour of features in an application.

I am trying to get the tour to work with a native bootstrap dropdown. The dropdown contents are hidden and when the tour gets to that step I am adding the CSS class "open" on the dropdown which is what happens when you click on it. (standard bootstrap behavior)but it does not open.

I have tried everything to try to get the tour attach to the hidden element by first showing it but nothing seems to work. I have created a fiddle so you can see what I am trying to explain.

    // Instance the tour
var tour = new Tour({
  debug: true,
  storage: false,
  steps: [{
    element: "#step1",
    title: "Settings",
    content: "Content of settings",
    placement: "bottom",
  }, {
    element: "#step2",
    title: "Title of my step",
    content: "Content of my step",
    placement: "bottom",

  }, {
    element: "#step3",
    title: "Title of my step",
    content: "Content of my step",
    placement: "bottom",
    onHidden: function() {
      $(".dropdown").addClass("open");
    },
  }, {
    element: "#step4",
    title: "Title of my step",
    content: "Content of my step",
    placement: "bottom",
    onShow: function() {
      $("#dropdown").addClass("open");
    },
  }]
});

if (tour.ended()) {
  tour.restart();
} else {
  tour.init();
  tour.start();
}

http://jsfiddle.net/rdoddXL/ku0fx7gq/2/

Any help would be appreciated

Thanks

Answer 1

If you want to add the tour functions to your boostrap dropdown:

• remove onHidden: function() { ... onShow....
• add the Bootstrap Tour Methods as action to your dropdown options

If, instead, your problem is to open programmatically from tour action the dropdown you are experiencing a problem: when you hide the third element and show the fourth element you call open and close dropdown concurrently (one after another).

I suggest you to act differently.

Indeed, if the problem consist in opening the dropdown at the end of the tour, you can add at the end of tour creation:

onShow: function(tour) {
    var cs = tour.getCurrentStep();
    if (cs == 2) {  // if last tour step...open the dropdown
        setTimeout(function() {
            $("#dropdown").addClass("open");
        }, 100)
    }
}

The snippet (your updated jsfiddle):

//
// selecting an option of dropdown do the action....
//
$('#step4').on('click', function(e) {
  switch (e.target.textContent) {
    case 'Action':
      var cs = tour.getCurrentStep();
      if (cs == 3 || tour.ended()) {
        tour.end();
        tour.restart();
      } else {
        tour.next();
      }
      break;
    case 'Another action':
      // do stuff
      break;
  }
})
// Instance the tour
var tour = new Tour({
  debug: true,
  storage: false,
  steps: [{
    element: "#step1",
    title: "Settings",
    content: "Content of settings",
    placement: "bottom"
  }, {
    element: "#step2",
    title: "Title of my step",
    content: "Content of my step",
    placement: "bottom"

  }, {
    element: "#step3",
    title: "Title of my step",
    content: "Content of my step",
    placement: "bottom"
  }, {
    element: "#step4",
    title: "Title of my step1111",
    content: "Content of my step",
    placement: "bottom"
  }],
  onShow: function(tour) {
    var cs = tour.getCurrentStep();
    if (cs == 2) {
      setTimeout(function() {
        $("#dropdown").addClass("open");
      }, 100)
    }
  }
});
if (tour.ended() == true) {
  tour.restart();
} else {
  tour.init();
  tour.start();
}

ul.nav {
  border: 1px solid black;
  margin-left: 5px;
  display: inline-block;
}

#step1 {
  height: 200px;
  width: 200px;
  margin: 10px;
  background-color: #eeeeee;
  position: absolute;
  left: 0;
  top: 150px;
}

#step2 {
  height: 200px;
  width: 200px;
  margin: 10px;
  background-color: #666666;
  position: absolute;
  left: 210px;
  top: 150px;
}

#step3 {
  height: 200px;
  width: 200px;
  margin: 10px;
  background-color: #1c90f3;
  position: absolute;
  left: 420px;
  top: 150px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"></script>


<div id="dropdown" class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul id="step4" class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

<div id=step1></div>
<div id=step2></div>
<div id=step3></div>