Backdrop changes element's background colour

[shaneparsons]

Is there a way to disable the colour changing that happens to an element when backdrop: true?

The image below illustrates the problem I'm having.. the button colour is supposed to be primary i.e. #337ab7.

[steveostudios]

I'm having the same issue.

[ousmanedev]

I don't have this issue, maybe it's due to another problem in your code. Did you try with a new blank project ?

[shaneparsons]

@Ousram Unfortunately I'm unable to play around with this further because I ended up using something else for my tour, but yes, the project was a blank project with only the bootstrap and bootstrap-tour files.

[DaddyWarbucks]

I am having this same issue

[ousmanedev]

please create a jsfiddle for this issue, so we could more understand (the problem), based on your code.

[tmckd]

I also had this problem. For me, the solution was to make sure that in my application.css.sass file I import bootstrap-tour before I import bootstrap.

So before I had:
@import "bootstrap"
@import "bootstrap-tour"

and I had the problem.

Now I have:
@import "bootstrap-tour"
@import "bootstrap"

and the problem is gone.

[elivinsky]

That may not be a good approach. I'd recommend wrapping the button in a div and use the wrapper to set the Step.

The background: inherit added to the element I think it is to better stick out the element for the Tour.

[gdelhumeau]

Hello.
I have reproduced this issue on a jsFiddle:
https://jsfiddle.net/Lz3d4vns/2/

With screenshots:
Before:

After:

Please re-open the issue.

Thanks,

Guillaume

[gdelhumeau]

Thanks for having re-opened this issue.

The problem is that .tour-step-background has background: inherit;, which I guess means that it uses the body background.

In that case, the background of the element is dark but the body is light so we have this inappropriate result.

In my opinion, a fix is not easy. Adding opacity: 0.5; could help but only when the element has a dark background.

It would be interesting to see how the boostrap tour works with dark themes, like: http://bootswatch.com/cyborg/.

I hope it helps,

Thanks,
Guillaume

[elivinsky]

As I suggested earlier, you could just wrap the element in a <div /> and use that as the step.

Your jsFiddle updated: https://jsfiddle.net/Lz3d4vns/3/

[gdelhumeau]

Then, it's easy to fix it directly in bootstrap-tour. Wrap the element in a <div> with jQuery before displaying the step, and unwrap it after the step disappears.

It would not require the user to change the HTML of his page, and bootstrap-tour gets better!

WDYT?

[ousmanedev]

What do you think about allow developer to set the step element background-color
Something like this :
steps: [
{
element: "#startTour",
title: "Title of my step",
content: "Content of my step",
placement: "bottom",
backdrop: true,
background-color : '#529abb'
}
]

[gdelhumeau]

@Ousram: I don't think it's a good solution. Sometimes you don't know what color you should use. In my example, you can replace the bootstrap CSS file by any bootswatch equivalent and it should continue to work without any modification in the JS.

[gdelhumeau]

To be more precise, I am a developer of XWiki. We have a default skin but the user could use different themes (even from bootswatch).

I am currently working on an extension for XWiki called Tour Application that should work with every theme that the user can chose. So I need a generic solution.

I could probably add some code in my application to handle this use-case, but it would be a shame to not have it in the upstream library.

WDYT?

[ousmanedev]

If setting the right color is too much, maybe the developer can set if yes or no, he wants the background-color to change.
I'm saying that because, the background:inherit property, is important although it sometimes falls to not so good results (buttons).

[ousmanedev]

@sorich87 , what do you think ?

[sorich87]

@gdelhumeau

Then, it's easy to fix it directly in bootstrap-tour. Wrap the element in a

with jQuery before displaying the step, and unwrap it after the step disappears.

Won't it break some designs? I'm think about when people use rules like .some-selector > div e.g. on the element where the popover is applied. Making Bootstrap Tour modify their HTML code to show the popover may break these cases.

[elivinsky]

Also it could break some event binding. Why is it that hard to wrap it manually?

[sorich87]

@Ousram about your solution of setting the background color, would setting the color automatically from the element color be a good solution?

[gdelhumeau]

@sorich87: Indeed. I should have thought more about the impact of this proposition.

@elivinskydb: We cannot always change the HTML code, especially from 3rd parties.

[gdelhumeau]

Other idea: stop having a unique .tour-backdrop div that cover all the page, but instead create 4 divs:

• one on top of the element to show
• one above
• one on the left
• one on the right

In that case, we don't need to play with the z-index attribute, nor the background color of the element. The result would be visually the same for the backdrop, but this bug would be fixed.

What do you think?

Thanks,

Guillaume

[sorich87]

@gdelhumeau good idea! working on it.

[sorich87]

A new way to handle backdrop has been implemented in 7f98180. Please test.

[gdelhumeau]

It seems it works:
https://jsfiddle.net/Lz3d4vns/21/

Thanks

[jonwilcox]

That's great. I was having the same problem. I downloaded that newer build and it worked great (although I don't think the minified versions in that build had the updates in them). Any idea when this will make it into an official release?

[linking2014]

with this solution, the highlight section won't have border-radius any more. I prefer to add a background-color option rather than handle backdrop with 4 divs.