Snippet Highlight Combine | iGuider Product Tour

Source

<script src="../js/jquery-3.1.1.min.js"></script>

<link rel="stylesheet" href="../css/iGuider.css">
<script src="../js/jquery.iGuider.js"></script>

<link rel="stylesheet" href="../themes/neon/iGuider-theme-neon.css">
<script src="../themes/neon/iGuider-theme-neon.js"></script>	

<style>
[data-g-stepid = "customName"] .iGuider-highlight {
	animation:iGuider-highlight 1s infinite ;	
}
[data-g-stepid = "customName2"] .iGuider-highlight {
	border:4px dashed orange;
}
@keyframes iGuider-highlight {
	0% {
		box-shadow:0 0 20px -10px #39F;
	}
	50% {
		box-shadow:0 0 40px 0 #39F;
	}
	100% {
		box-shadow:0 0 20px -10px #39F;
	}
}
</style>
	
<script>
$(window).on('load',function(){
	$('.start-tour').on('click',function(){
		iGuider({
			tourTitle:'Snippet Highlight Combine',
			steps:[{
				title:'Step 1',
				content:'Step 1 Description',	
				target:'el-1',
				overlayOpacity:0,
				stepID:'customName'
			},{
				title:'Step 2',
				content:'Step 2 Description',	
				target:'el-2'
			},{
				title:'Step 3',
				content:'Step 3 Description',	
				target:'el-3',
				overlayOpacity:0,
				stepID:'customName2'
			}]
		});
		return false;
	});
})
</script> 

<p><a class="btn start-tour" href="#">Start Tour</a></p>

<span class="custom-element" data-target="el-1">Element 1 </span>	
<span class="custom-element" data-target="el-2">Element 2 </span>	
<span class="custom-element" data-target="el-3">Element 3 </span>