Bootstrap tour with backdrop enabled acting strange

Question

I am using Twitter Bootstrap Tour for a web tour.

Here is the javascript to initialize it:

    var tour = new Tour({
        backdrop: true,
        steps: [
        {
            element: "#keyword-link",
            title: "Title of my step",
            content: "Content of my step"
        },
        {
            element: "#keyword-dropdown",
            title: "Title of my step",
            content: "Content of my step"
        }
        ]
    }).init().start(true);

Currently I am just using test content within each step. I am trying to get the backdrop effect as shown on their own website: http://bootstraptour.com/

However, here is the result I have achieved:

Here is what it looks like without the backdrop:

You can see that the non-shadow portion masks the HTML perfectly, but its opacity is too high and you can't see any of the content that isn't masked. Is there a reason for this and what can I do to fix it?

I wasn't able to reproduce any kind of backdrop from within JSFiddle.

Answer 1

I had this same issue trying to set up a tour with steps targeting elements nested deep in the DOM.

If you look at the DOM in Chrome dev tools and find the two overlay elements 'tour-backdrop' and 'tour-step-background' and drag them in the DOM so that they are closer (on the same level or at the parent level) to the element you are trying to highlight, you will probably see the highlighting working correctly. I believe this is probably a bug with the library.

Without doing some fiddling with the tour library itself, to get it working I moved the overlay elements to the functioning position in the DOM using the 'onShown' method for the affected steps, like so:

onShown: function() {
    $(".tour-backdrop").appendTo(".pContainer");
    $(".tour-step-background").appendTo(".pContainer");
    $(".tour-step-background").css("left", "0px");
}

Answer 2

Instead of onShown: you can add 'backdropContainer: '.parent class of the item you highlited' as below. It is useful when you get such strange issues in multiple cases.

var tour = new Tour({
        backdrop: true,
        steps: [
        {
            element: "#keyword-link",
            title: "Title of my step",
            content: "Content of my step"
        },
        {
            element: "#keyword-dropdown",
            title: "Title of my step",
            content: "Content of my step",
            backdropContainer: '.Parent class name of #keyword-dropdown'
        }
        ]
    }).init().start(true);

Answer 3

Add this to your CSS:

    .popover, 
    .popover.tour,
    .tour-backdrop,
    .tour-step-background {
        z-index: 1;
    }