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: /

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.

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./

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.

• javascript
• twitter-bootstrap
• twitter-bootstrap-3
• bootstrap-tour

Share Improve this question Follow asked Mar 7, 2015 at 9:55 Will HuaWill Hua 1,74822 gold badges2323 silver badges3333 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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

Add this to your CSS:

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