Tour not working on hidden elements.

[rdoddXL]

I am trying to get the tour to work with a 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.

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

Any help would be appreciated

Thanks

[dhfuzari]

I'm also going through the same problem

[timredbullet]

Also have the same problem. If you have an item on the tour which is hidden the tour skips over the element and it doesn't seem possible to bring this into view by using the methods available on the steps.

Trying to achieve the same result as @rdoddXL

[r1z1a]

Is there a way to force stop of the tour (as in not move onto next step) until the next element is visible?

Say your step one and two need to be passed by the user before 3rd step is set visible at which point the "next" button can be pressed or it auto passes onto next step.

I can see there is "orphan" parameter, but this will display the step regardless if element exists or hidden.

[El-Mahbub]

I have a same problem, plese explain us a better solution. Because if we are use button botstrap tour to hiding element, how if tour is needed for first or one only ?

[vetik32]

use promises

http://jsfiddle.net/82pa01g7/ or delay:

http://jsfiddle.net/emeoq5z6/

[aslamkhan669]

Delays are best suited for this scenario.

[benirose]

I'm also running in to this issue. I put the following onShow method in my step:

onShow: function(tour) {
  console.log('opening navigation');
  $('.primary-nav .dropdown:first .dropdown-toggle').dropdown('toggle');
},

However it's still not working. I stepped through the code in dev tools and it actually does open, but then immediately closes again before the popover opens. Something in the event handlers seem to be causing a click on the document/body that closes the dropdown.

[skybondsor]

I had a similar issue and fixed it by using the onShown method instead of onShow. Possibly not ideal for your situation, but it works!