Option to make the highlighted element unclickable.

[WhileLoop]

Hi all,

First of all, great work, love this library.

For my project I had the need to make it so that the element which was being highlighted should not be clickable since clicking it would modify the page and break the next step of the intro. I did this by creating a DIV which would use the same absolute positioning as the helperLayer, with a higher Z-index, a opacity of 0, and cursor: not-allowed. Alternatively the DIV could be added as a child to the helperLayer, this would remove the need to absolutely position.

If this is an acceptable solution I could create a pull request with the changes.

[Alchnemesis]

+1 on this. Would be a nice option, instead of manually appending a tons of masked div's

[Alchnemesis]

This issue can be fixed inserting next CSS code:

.introjs-showElement { z-index: 999 !important; position: relative; &:before{ width:100%; height: 100%; left: 0; position: absolute; content: ""; z-index: 999999 !important; } }

[iamdanfox]

@WhileLoop I also needed this functionality, but I with really fine-grained control so that I could disable certain parts and enable others.

What do you think of this solution: http://iamdanfox.github.io/anno.js/#unclickable-target?

[delmicio]

Easier than @Alchnemesis method with css:

.introjs-tooltipReferenceLayer {
    visibility: visible;
}

[bozdoz]

@iamdanfox looks like a good solution to this problem.

in summary: add and remove an event listener to a button with e.stopPropagation() within the function to keep it from executing any other event listeners.

I do not think this should be solved with CSS as others have recommended. And I'm also unsure that this should be part of the library as opposed to just implemented when needed. I personally did use something like this on my own project, however; so it could be useful to a number of people.

@afshinm thoughts?