Intro.js: highlighted area doesn't work as expected

Question

I'm using the very interesting javascript library intro.js .

However, in my application, the highligted area becomes almost completely white.

I'm guessing that this is some CSS conflict, but what can I do to determine the cause of this problem?

Answer 1

Extracted from issue #109 ( https://github.com/usablica/intro.js/issues/109 ):

.introjs-helperLayer {
    background: transparent;
}

.introjs-overlay {
    opacity: 0 !important;
}

.introjs-helperLayer:before {
    opacity: 0;
    content: '';
    position: fixed;
    width: inherit;
    height: inherit;
    border-radius: 0.5em;
    box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
    opacity: 1;
}

.introjs-helperLayer:after {
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 1000;
}

This will solve your problem. Hope it helps as it did for me! Shout to @weili1977 and @exoJSON who provided the answer in GitHub.

Answer 2

This is common for users using table row element. I solve mine by adding these lines to css.

.introjs-relativePosition > td { position: relative; }
.introjs-showElement > td { z-index: 9999999 !important; }

Answer 3

I set the target element position to absolute (in corresponding CSS) and it works now! see here - http://prntscr.com/1dl0db

Answer 4

The problem can be fixed by setting absolute position for parent element:

.introjs-fixParent {
  position: absolute !important;
}

Answer 5

I didn't see any jsFiddle or any online example of your problem but I try to answer your question in this way:

1. It's seems you're using another UI library like ExtJs or something, make sure you don't have any CSS conflicts.
2. Try to change data-intro and data-step in another element, for example if now you have the data-intro and data-step in the form element, change it to an upper element or a div .

Answer 6

In the Introjs.css, setting the z-index to 1 for the introjs-helperlayer class fixes this issue. However, I do not know the full implication of this change.

Answer 7

Are you trying to highlight a Table Row ()? If so I experienced this problem too. Someone posted a fix in the github issues section: https://github.com/usablica/intro.js/issues/146

Answer 8

I managed to get a useable result with this:

.introjs-helperLayer {
     mix-blend-mode: overlay !important;
}