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! :)

zessx · Accepted Answer · 2020-05-04T11:08:41.330

5

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');
    }
})

edited May 04 '20 at 11:08

answered Dec 10 '13 at 14:01

zessx

68,042
28
135
158

5

FYI, the API has since been updated and you now need to use tour._options.steps[tour._current]; – Constant Meiring Aug 28 '14 at 12:50

score 4 · Answer 2 · answered Sep 25 '18 at 15:02

4

For me, the easiest way to accomplish this was using CSS.

You can apply CSS to your highligthed element:

.tour-NameOfYourTour-element {
    pointer-events: none;
}

This doesn't change anything visually, and clic don't work.

answered Sep 25 '18 at 15:02

Romias

13,783
7
56
85

thenninger · Answer 3 · 2017-11-28T19:32:12.373

Using the same callback technique, I decided to overlay a div instead of add the disabled attribute to the step element. This works well when the backdrop is turned on and the element is not an input field (i.e. the disabled property takes no effect).

First the css for the overlay:

.tour-step-backdrop-parent {
    position: absolute;
    z-index: 1100;
}

And the code (updated to account for backdrop padding and absolute positioned step element):

onShown: function(tour) {
    var step = tour._options.steps[tour._current];

    /// Overlay a div on the tour contents to prevent clicking
    // Remove any existing overlay divs - accounting for shown event being called on window resize
    $(step.element).siblings('.tour-step-backdrop-parent').remove();
    // Create overlay div
    var disabledOverlay = $('<div class="tour-step-backdrop-parent"></div>');
    // Insert overlay div before step element in DOM
    $(step.element).before(disabledOverlay);
    // Account for step's backdrop padding if any (double it since it surrounds the element)
    var padding = (step.backdropPadding || 0) * 2;
    // Set size of the overlay div to the step element's size and account for rounding by adding 1 pixel
    disabledOverlay.outerHeight(stepElement.outerHeight() + padding + 1).outerWidth(stepElement.outerWidth() + padding + 1);
    // Set position based on element's position and adjust for backdrop padding
    var offset = stepElement.offset();console.log(offset);
    offset.top = offset.top - (step.backdropPadding || 0);
    offset.left = offset.left - (step.backdropPadding || 0);
    disabledOverlay.offset(offset);
},
onHidden: function(tour) {
    var step = tour._options.steps[tour._current];
    // Remove overlay div
    $(step.element).siblings('.tour-step-backdrop-parent').remove();
}

score 0 · Answer 4 · answered Jul 08 '18 at 06:58

The API is updated, in v0.12.0 you can achieve the same functionality through the following code.

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

Credit goes to @zessx

Disable highlighted area while using Bootstrap Tour

4 Answers4