Intro.js: How to use intro.js with Polymer 2?

[amanshu-kataria]

I'm trying to use intro.js in my Polymer 2 application for the first-time users. But, it's not working out for me. Here's the codepen link.
Can anyone please help me integrating intro.js into Polymer 2 app?

[amanshu-kataria]

@afshinm need help here please.

[bozdoz]

Have you tried the programmatic approach?

https://github.com/usablica/intro.js/blob/master/example/programmatic/index.html#L73

[afshinm]

+1 @bozdoz

Please use the JSON form to define the steps.

[amanshu-kataria]

@bozdoz @afshinm It worked but there's some styling issue. The opacity of the focused part is too much.
As you can see in the images the button is not visible. The button can be slightly seen by taking a close look on it, which means the opacity is too much.

How to fix this?

[afshinm]

I believe this is z-index issue. Could you change the z-index of button /
highlight area manually and see if it helps?

I mean, it doesn't related to Polymer specifically.

On Mon, Aug 14, 2017 at 2:56 PM, Amanshu Kataria [e-mail]
wrote:

@bozdoz https://github.com/bozdoz It worked but there's some styling
issue. The opacity of the focused part is too much.
As you can see in the images the button is not visible. The button can be
slightly seen by taking a close look on it, which means the opacity is too
much.
[image: capture 2]
https://user-images.githubusercontent.com/13014093/29274535-d8b0cdbe-8125-11e7-81d9-a56ce11944fb.PNG
[image: capture]
https://user-images.githubusercontent.com/13014093/29274543-dc88c482-8125-11e7-9c9b-ca20054e2bfa.PNG

How to fix this?

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/usablica/intro.js/issues/733#issuecomment-322196832,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AATL1nSezt_YRy6070RsMcIytC7FbcWGks5sYFIKgaJpZM4Ouu1o
.

[amanshu-kataria]

@afshinm tried that but nothing changed.

[amanshu-kataria]

@afshinm How to change the z-index of highlight area?

[amanshu-kataria]

@afshinm fixed it. Had to set z-index: 9999999;. Thanks :)

[amanshu-kataria]

@afshinm is there's any way to reduce the opacity of the highlighted area? Because the button remains on top of the backdrop even when it is not highlighted, which doesn't looks good. It would be really very helpful if you could please help me with reducing the opacity of the highlighted area.