Parameter keyboardEvent | 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/material/iGuider-theme-material.css">
<script src="../themes/material/iGuider-theme-material.js"></script>	
	
<script>
$(window).on('load',function(){
	$('.start-tour').on('click',function(){
		iGuider({
			tourTitle:'keyboardEvent',
			
			tourMap:{
				clickable:'ready'
			},
			keyboardEvent:true,
			
			steps:[{
				title:'Step 1',				
				content:'To continue, click on the highlighted element',	
				target:'el-1',
				event:'click',
				eventMessage:'Click on element'
			},{
				title:'Step 2',				
				content:'To continue, click on the highlighted element on this button <p><button class="clickMe">CLICK ME</button></p>',	
				target:'el-2',
				event:['click','.clickMe'],
				eventMessage:'Click the link'
			},{
				title:'Step 3',				
				content:'To complete, turn on the checkbox <p><label><input name="checkMe" type="checkbox">Check Me</label></p>',	
				target:'el-3',
				event:['change','[name="checkMe"]'],
				eventMessage:'Check item'
			},{
				title:'Step 4',				
				content:'You are the best!',	
				position:'center'
			}]
		});
		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>