Parameter steps.shape | iGuider Product Tour

This parameter set the shape of highlighting for a specific step (0 - rectangle, 1 - circle, 2 - rounded rectangle)

Start Tour

Element 1 Element 2 Element 3 Element 4

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:'steps.shape',
			steps:[{
				title:'Step 1',				
				content:'Circle Shape',	
				target:'el-1',
				shape:1
			},{
				title:'Step 2',				
				content:'Circle Shape',	
				target:'el-2',
				shape:1
			},{
				title:'Step 3',				
				content:'Rectangle Shape',	
				target:'el-3',
				shape:0
			},{
				title:'Step 4',				
				content:'Rectangle Shape',	
				target:'el-4',
				shape:0
			},{
				title:'Step 5',				
				content:'Rounded Rectangle Shape',	
				target:'el-1',
				shape:2
			},{
				title:'Step 6',				
				content:'Rounded Rectangle Shape',	
				target:'el-4',
				shape:2
			}]
		});
		return false;
	});
})
</script> 

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

<a href="#" class="custom-element" data-target="el-1">Element 1 </a>	
<a href="#" class="custom-element" data-target="el-2">Element 2 </a>	
<a href="#" class="custom-element" data-target="el-3">Element 3 </a>
<a href="#" class="custom-element" data-target="el-4">Element 4 </a>