Intro JS header small text goes here...
No dependencies, fast and small
10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped).
User-friendly
Navigate using keyboard or mouse. Easily change the themes for your website.
Browser compatibility
Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer.
<!-- required files -->
<link href="../assets/plugins/intro.js/minified/introjs.min.css" rel="stylesheet" />
<script src="../assets/plugins/intro.js/minified/intro.min.js"></script>
<!-- html -->
<a class="btn btn-lg btn-primary" href="#" onclick="javascript:introJs().start();">Demo</a>
<h1 class="display-4" data-step="1"
data-intro="Hello world! I'm Intro.js"
data-hint="Hello world! I'm Intro.js"
data-hintPosition="top-middle"
data-position="bottom-right-aligned">
Intro.js
</h1>Examples
Progress bar
Add progress-bar to your step-by-step introduction. It's as easy as adding .setOption('showProgress', true) option to your Intro.js instance.
<script>
introJs().setOption('showProgress', true).start()
</script>Hint
Hints enables you to add additional descriptions to any part of a web page. You can define hints by adding data-hint attribute to the HTML elements.
<script>
introJs().addHints();
</script>Enable/disable options
You can enable or disable options like buttons, progress-bar and bullets by calling the setOption('showBullets', false) function and pass option name.
<script>
introJs().setOption('showBullets', false).start();
</script>