JS - Intro.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.js"></script>
<script src="https://cdn.jsdelivr.net/npm/intro.js@2.9.3/intro.min.js"></script>
<script src="https://cdn.bootcss.com/intro.js/2.9.3/intro.min.js"></script>
_____________
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@2.9.3/themes/introjs-modern.css">

.::[Basic]::.
data-intro='Step 1'
data-step
data-position='auto|top|left|right|bottom'
______
data-disable-interaction="1"

introJs().start();
introJs(".introduction-farm").start();


.::[Multi-Page]::.
<script type="text/javascript">
	document.getElementById('startButton').onclick = function() {
		introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
			window.location.href = 'second.html?multipage=true';
		});
	};
</script>
_________________
<script type="text/javascript">
	if (RegExp('multipage', 'gi').test(window.location.search)) {
		introJs().start();
	}
</script>


.::[Hint]::.
data-hint='Hint 1'

introJs().addHints();


.::[JSON]::.
<script type="text/javascript">
	function startIntro(){
		var intro = introJs();
		intro.setOptions({
		steps: [
			{ 
				intro: "Hello world!"
			},
			{ 
				intro: "You <b>don't need</b> to define element to focus, this is a floating tooltip."
			},
			{
				element: document.querySelector('#step1'),
				intro: "This is a tooltip."
			},
			{
				element: document.querySelectorAll('#step2')[0],
				intro: "Ok, wasn't that fun?",
				position: 'right',
				disableInteraction: true
			}
		]
	});
	intro.start();
}
</script>


.::[API]::.
introJs().goToStep(2).start()
introJs().goToStepNumber(9)
introJs.next|previousStep()

===[Options]===
next|prev|skip|done|hideLabel
exitOnOverlayClick: true|false
showStepNumbers
keyboardNavigation
showButtons|Bullets|Progress
scrollToElement
overlayOpacity: 0.1