Search code examples
csssassintro.js

Why is IntroJS tooltipClass option not working

I'm using introJS in my angular application. I went step by step based on the tutorial on their site. I wanted to change the styling so I basically copied their code but it didn't work. It added the class but it has no effect on the tip.

My TS:

this.introJS.setOptions({
      tooltipClass: 'customTooltip'
    }).start();

My Scss:

.customTooltip * {
  color: #e81717;
  font-size: 18px;
}

.customTooltip .introjs-tooltip-title {
  color: #0a41c9;
}

My html:

<div class="card-demo" data-tooltipClass="customTooltip" data-title="Welcome!" data-intro="Hello World!">
</div>
Solution

  • The problem was that the class was created in components scss. But I needed to create a global css class and use that.

    Why? Because the components is nested in app-root and app-root is a sibling to the intro.js elements but they are both in the index.html so when I created the global css class intro.js elements were able to access it.