Is it possible to disable 'Skip' button?

[cilia]

In certain situations, I want to make sure that the users complete the tour, so an option for disabling the 'Skip' button would be nice.

Can we do this in intro.js at the moment?

[assafgelber]

I sort of accomplished this using css:

.introjs-skipbutton {
    display: none;
}

Pair that with disabling exitOnEsc and exitOnOverlayClick so only if the user manually edits your css he can skip.

[maxdeepfield]

Making .introjs-skipbutton display: none; is wrong, because this also hides "Done' button.

[assafgelber]

Aaahhh yes, didn't notice that 😌
Nice catch.

[Purus]

Both skip and done buttons have same class of "introjs-button introjs-skipbutton". So just CSS can't come to our help.

[xuanlt]

This is my way, temporary solution.

    var tour = introJs();
    tour.start();

    $('.introjs-skipbutton').hide();

    tour.onafterchange(function(){          
        if (this._introItems.length - 1 == this._currentStep || this._introItems.length == 1) {
            $('.introjs-skipbutton').show();
        } 
    });

[or9400]

Tanks xuanlt !

[dougvk]

+1, please fix this

[CanRau]

+1
would be awesome when skip and done buttons are really separate and deactivatable :-)
and for a little more neatness, could be nice to disable prevbutton on first step

hacked the plugin to disable skip button, but couldn't disable prevbutton on first step easily.. :/

Saludos, nevertheless thanks for the nice plugin!
Tried many other webguide plugins, but intro.js works the best for me!

[vana-dev]

+1

[afshinm]

will fix it guys, thanks.

[RicardoVaranda]

+1

[delmicio]

+1 (7 months later)

[rinogo]

Having skip and done be indistinguishable from a CSS perspective makes Intro.js a lot less flexible. I'm styling the "Skip" button to be a small, unobtrusive, "x" icon. However, I want to leave the "Done" button styled similarly to the "Next" button. With the current implementation, this requires a funky workaround.

Is @waynn's solution acceptable? If so, can he/she open a PR to be accepted into master?

[rinogo]

Looks like there's already a PR - @afshinm, can you please Merge this PR?

[afshinm]

Just merged that PR. I will test it myself today and will include it for the next release. Sorry for this delay.

[radumpopescu]

Apparently it did create a bug. I made a fix here: #675

[afshinm]

I will have a look @radumpopescu

thanks.

[zzfScarecrow]

Please fix this....And, I have a problem, please see this，

Why the highlight part covered by white?

[akrako1]

the introjs-disabled class is added to the 'previous' button on the first step, and the 'next' button on the last step. i really just wanted them hidden, so i added the below to my css. Poof! Done!

.introjs-disabled {
display: none !important;
}

[Rafaelinpsercom]

SOLUCIONADO CON CSS

ANGULAR
::ng-deep .introjs-skipbutton{
visibility: hidden !important;
}
::ng-deep .introjs-donebutton{
visibility: visible !important;
}

SIN ANGULAR
.introjs-skipbutton{
visibility: hidden !important;
}
.introjs-donebutton{
visibility: visible !important;
}

[ghost]

+1 (a few years on)

[Arashturk]

Please fix this....And, I have a problem, please see this， Why the highlight part covered by white?

hmmm.
you can use highlightClass attribute for this:
steps: [ { title: 'Farewell!', element: document.querySelector("#elCreateNew"), title: 'MyTitleIntro', intro: "This whole area does something.", highlightClass: "highlighted-element" }, ]

css:
.highlighted-element { border: 2px solid #3498db; background-color: rgba(52, 152, 219, 0.3); }