How to customize overlay of intro.js

Question

I would like to customize the tooltip in intro.js .(Change the background color of tooltip to blue) Is it possible to achieve in intro.js

Ashraful Islam · Answer 1 · 2018-01-02T08:52:35.853

2

overlayOpacity property Adjust the overlay opacity of backdrop created by intojs. The range is 0 to 1

Add overlayOpacity:0 in introJs options to completely remove the backdrop. introJs().setOption("overlayOpacity", 0);
override .introjs-tooltip class to change background of tooltip.

.introjs-tooltip{ background-color:#0000FF; }

edited Jan 02 '18 at 08:52

answered Jan 02 '18 at 05:00

Ashraful Islam

While this might provide an answer to the question, some explanation is required. Please update the answer with some explanation of how and why this solution works. – Brett DeWoody Jan 02 '18 at 07:29

score 1 · Answer 2 · answered Jan 20 '17 at 12:43

1

All you need to do is adding a new CSS rule to override the background-color of .introjs-overlay:

.introjs-overlay {
  background-color: blue;
}

Also you can add background gradient, opacity, whatever you want.

answered Jan 20 '17 at 12:43

Afshin Mehrabani

I'm adding this but not overriding! (Although I have tried to add "!important") By the way, when it overrides, does it hide old styles of this class? Or just add new style to near existing ones? – hasany May 25 '20 at 14:16
where do I use this class? – mnagdev Feb 03 '23 at 12:36

2 Answers2