How do I adjust the style of the tooltip for specific steps when using Intro.js

Question

I'm trying to change the style of the very first step (data-step="1") and I went about it by calling onbeforechange()

introJs().onbeforechange(function(targetElement) {
    switch (targetElement.getAttribute("data-step"))
    {
        case "1":
            //change CSS styling only for the first box
            $(".introjs-helperLayer .introjs-tooltip").attr("style", "margin-left: 10%");

        break;
    }
}).start();

Essentially, I'm trying to center the tooltip for the very first step. Any help is much appreciated; I'm a near-novice in JavaScript.

score 1 · Answer 1 · answered Jul 02 '13 at 10:30

1

Try use this code:

introJs().onbeforechange(function(targetElement) {
    switch (targetElement.getAttribute("data-step"))
    {
        case "1":
            //change CSS styling only for the first box
            $(".introjs-helperLayer").css("text-align", "center");

        break;
    }
}).start();

answered Jul 02 '13 at 10:30

Afshin Mehrabani

33,262
29
136
201

Hi Mr. Mehrabani, thank you for your response and thank you for your project :) Unfortunately, the getAttribute returns a null value so the switch statement doesn't work at all. Oddly, I found that changing introJs().onbeforechange() to introJs().onchange(), getAttribute("data-step") returns a number (although the styling still doesn't work). Is there a real difference between onbeforechange() and onchange()? – elisaeo10 Jul 02 '13 at 13:27
@MonElisa Thanks. I'm so sorry to say that it's a bug in the old version of IntroJs and it will be fixed it the next version (also it was fixed in the `master` branch of Github repository). – Afshin Mehrabani Jul 02 '13 at 13:46

score 0 · Answer 2 · answered Jul 03 '13 at 17:17

I managed to figure it out, sort of. It turns out introJs().onbeforechange() is unable to take the targetElement parameter (this bug has been reported).

So instead, I used introJs().onchange() and declared the start() function before and after. As follows:

introJs().start();
introJs().onchange(function(targetElement) {
    switch (targetElement.getAttribute("data-step"))
    {
        case "1":
            //Center the tooltip
            $(".introjs-tooltip").css("margin-left", "300px");
        break;

        case "2":
            //Remove margin-left
            $(".introjs-tooltip").css("margin-left", "0");
        break;

    }
}).start();

Otherwise, case "1"'s css function will not fire. I tried replacing introJs().start() with case "1"'s css function but it didn't work. So you will have to fire start() two times.

Unfortunately, I still haven't figured out how to get the tooltip to be exactly in the center of the page (margin: doesn't work at all even after using !important). A shame, but what can you do?

I hope this helps others in the future.

score 0 · Answer 3 · answered Oct 02 '14 at 22:47

You can add a class to the tooltip for that specific step. You would then be able to style the tooltip via css.

To do this add the data-tooltipClass="sample-class" attribute to the element you wish.

A full list of accepted attributes can be found at: https://github.com/usablica/intro.js#attributes

Muhammad Musavi · Answer 4 · 2019-03-12T08:24:57.423

targetElement.getAttribute("data-step") will return null if you have used JSON for steps initialization.

I have another solution, you can apply id instead of step:

introJs().onbeforechange(function(targetElement) {
    switch (targetElement.id)
    {
        case "intendedId":
            $(".introjs-helperLayer").css("text-align", "center");
        break;
    }
}).start();

If you still want to know the current step when you use JSON object for initialization, here's the way I use:

var intro = introJs();
            intro.setOptions({
                steps: [
                    {
                        intro: "Text1"
                    },

                    {
                        element: document.querySelector(".leg"),
                        intro: "text2",
                        position: 'bottom'
                    }
                ]
            });

    intro().onbeforechange(function(targetElement) {
        var stepNumber = 0;
        for (var i=0; i < intro._options.steps.length; i++) {
            if (intro._options.steps[i].element == targetElement)
                stepNumber = i;
            }
        switch (stepNumber)
        {
           case "1":
             //change CSS styling only for the first box
             $(".introjs-helperLayer").css("text-align", "center");

            break;
        }
    }).start();

How do I adjust the style of the tooltip for specific steps when using Intro.js

4 Answers4