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

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.

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();

Intro.js, You can use these HTML attributes to manage or alter intro elements. data-intro : The tooltip text of step; data-step : Optionally define the number (priority) of step� Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

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.

Intro.js, Intro.js - Step-by-step guide and feature introduction for your website. Easily change the themes for your website. Browser compatibility Intro.js is open- source and free to use. Share the project You can use all HTML tags for step's tooltip. Also you can define a guide that doesn't focus on a specific element. This type� Intro.js can be added to your site in three simple steps: 1) Include intro.js and introjs.css (or the minified version for production) in your page. Use introjs-rtl.min.css for Right-to-Left language support.

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

Intro.js, steps : For defining steps using JSON configuration (see this example) tooltipPosition : Default tooltip position; tooltipClass : Adding CSS class to all tooltips Applies when scrollToElement is true; overlayOpacity : Adjust the overlay opacity,� Intro.js can be added to your site in three simple steps: 1) Include intro.js and introjs.css (or the minified version for production) in your page. Use introjs-rtl.min.css for Right-to-Left language support.

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();

Building A Step-By-Step Guide Using Intro.js [Tutorial], However there is something I want to point out in using Intro.js (which Basically you have 2 different options for setting up the various “steps” of the tour. file contains a number of helpful default styles for your tooltip effects. Intro.js can be added to your site in three simple steps: 1) Include intro.js and introjs.css (or the minified version for production) in your page. Use introjs-rtl.min.css for Right-to-Left language support.

Top 7 features you need to know about, Jump to the specific step of the introduction by using this function. As it is clear, introductions always start from the first step; however, it is possible to change the � Intro.js can be added to your site in three simple steps: 1) Include intro.js and introjs.css (or the minified version for production) in your page. Use introjs-rtl.min.css for Right-to-Left language support.

igorauad/intro.js-bootstrap: A better way for new feature , A better way for new feature introduction and step-by-step users guide for your afshinm change version to 1.1.1 … 1) This github repository, using git clone https://github.com/usablica/intro.js.git Add IntroJs styles --> <link href="../. Should be defined to start introduction for specific element, for example: #intro- farm . Intro.js can be added to your site in three simple steps: 1)Include intro.js and introjs.css (or the minified version for production) in your page. Use introjs-rtl.min.css for Right-to-Left language support.

customizing width of tooltip � Issue #5 � carlganz/rintrojs � GitHub, I first was exposed to intro.js during Herman Sontrop's talk at ShinyDevCon tags$style(HTML( ".introjs-tooltip { max-width: 100%; min-width: 500px; }" )) Then change the CSS using javascript based on each step number. + 1) # draw the histogram with the specified number of bins hist(x, breaks = bins,� Intro.js can be added to your site in three simple steps: 1) Include intro.js and introjs.css (or the minified version for production) in your page. Use introjs-rtl.min.css for Right-to-Left language support.

Comments
  • 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()?
  • @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).