IntroJS Bootstrap Menu doesn't work

Question

I'm using bootstrap for UI Design. I have configured updated IntroJS to my site. Now it works fine with other elements but giving problem with Dropdown Menu Elements.

problem in IntroJS with Bootstrap

Can you include your code and or create a bootply.com that demonstrates the issue? — Trevor, Nov 19 '13 at 15:53
see here: http://stackoverflow.com/questions/22433675/use-intro-js-on-bootstrap-dropdown-element — Alexandre Mélard, Mar 16 '14 at 07:13
@GaneshBhosale you need to show some code. Another problem linked had a different issue http://stackoverflow.com/a/25732066/2103767 — bhantol, Sep 08 '14 at 19:53

score 2 · Answer 1 · answered Aug 14 '15 at 14:14

hey man make sure your jquery link placed first then write javascript link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

score 0 · Answer 2 · answered Dec 06 '15 at 17:58

Check the Console. Most likely jQuery was not referenced, in which case you need to include it before IntroJS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

score 0 · Answer 3 · answered May 19 '17 at 16:35

A bit late to the party but for anyone googling:

The dropdown menu UL has introjs-fixParent added to it, for me this caused my menu to appear behind other elements on the page, so I fixed that by doing a z-index: 1000!important on the UL. Intro.js adds introjs-showElement on the element to be shown, which has a really high z-index. The problem here is the parents z-index is lower than the mask so any children are always behind the mask.

My fix was to remove the z-index: 1000!important on the UL and put the other elements behind my menu.

score -1 · Answer 4 · edited May 23 '17 at 11:55

I've had the same issue and I manage to resolve it, I posted an explanation there:

use intro.js on bootstrap dropdown element

Hope these help.

EDIT: Added snippet of code and explanation from link

I found a workaround, it's quite ugly, but does the job:

$scope.ChangeEvent = function (e) { 
    if (e.id === 'step2') {
        document.getElementById('step1').click();
        setTimeout(function () {
            document.getElementById('step2').style.display = 'block';
        }, 500);
    } 
    console.log("Change Event called"); 
};

I set the display attribute to block just after the click event I added in the change event

When clicking executing the click on the element 1, I noticed that jquery set the state of the style.display of the element 2 to '', so I wait a bit after clicking in order to set it back to 'block', I know it's ugly, but I didn't find anything better at the time

In this case the link is to another SO page, so that shouldn't be an issue, but this requires an additional and absolutely not needed navigation step, so I'm editing the post to include the relevant code since it seems to be a proper and useful answer — Devin, Sep 07 '14 at 19:17
ok, to tell the true, as my question hasn't been answer, I couldn't give a definitive answer. Instead, I would rahter have linked to my question page. — Alexandre Mélard, Sep 08 '14 at 12:27

IntroJS Bootstrap Menu doesn't work

4 Answers4

Linked