intro.js
intro.js copied to clipboard
How to use bootstrap classes ?
Description
At the moment IntroJS generates this code. I need to style it as our site and the fastest way is to change the class. For example, adding "btn btn-success" for the Next button and "btn btn-secondary" for the Prev button. How can I edit the HTML generated?
<div class="introjs-tooltip introjs-bottom-left-aligned" role="dialog" style="top: 117px;">
<div class="introjs-tooltip-header" style="display: none;">
<h1 class="introjs-tooltip-title">TITLE</h1>
<a class="introjs-skipbutton" role="button" tabindex="0">×</a>
</div>
<div class="introjs-tooltiptext">TEXT</div>
<div class="introjs-progress" style="display: none;"><div class="introjs-progressbar" role="progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" style="width: 20%;"></div></div><div class="introjs-arrow top" style="display: inherit;"></div><div class="introjs-tooltipbuttons"><a role="button" tabindex="0" class="introjs-button introjs-prevbutton introjs-disabled">Back</a><a role="button" tabindex="0" class="introjs-button introjs-nextbutton">Next</a></div></div>
It's not possible to add a new CSS class to the buttons but you can customize the existing CSS classes (e.g. introjs-btn)