Disable highlighted area while using Bootstrap Tour

Question

Good day!

I just started using Bootstrap Tour on our project and I seem to like it because of its simple yet functional interface. But I just have one tiny issue - how do I get the elements being highlighted by the tour to be temporarily disabled?

For example, if the current highlight of the tour is on a set of buttons, is there a way so that the users will not be able to click them while on tour?

Any help would be much appreciated! :)

Answer 1

You can specify callback functions when a step is shown/hidden. In those functions, you've acces to the current element, and you can act on it (see the documentation : Tour Options) :

var tour = new Tour({
    onShown: function(tour) {
        var step = tour._steps[tour._current];
        $(step.element).attr('disabled', true);
    },
    onHidden: function(tour) {
        var step = tour._steps[tour._current];
        $(step.element).removeAttr('disabled');
    }
})