intro

If set to true, before the tour you will see the introductory slide, which will offer to see a tour.
It may take the values: false or true

Start Tour

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.introBtn').on('click',function(){
		$('body').itour({
			introShow:true,		
			introCover:'doc_files/images/hello.gif',							
			tourTitle:'Example «intro»',
			tourMapVisible:true,
			steps:[{
				title:'Step 1',				
				content:'Step 1 Description',	
				name:'introEl_1'	
			},{
				title:'Step 2',
				content:'Step 2 Description',		
				name:'introEl_2'
			},{
				title:'Step 3',		
				content:'Step 3 Description',		
				name:'introEl_3'
			}]
		});
		return false;
	});
})
</script> 
<p><a class="btn btn-success introBtn" href="#">Start Tour</a></p>
<p>
	<span data-name="introEl_1">Element 1 </span>	
	-
	<span data-name="introEl_2">Element 2 </span>	
	-	
	<span data-name="introEl_3">Element 3 </span>			
</p>

multipage

For creating multi-page tour, you must specify the "loc" parameter with path to the page in value.

If the pages level is the same, just specify the page name (relative path)

loc:'yurPageRelativePath'

If different pages in tour have different depth levels:
       site.com/parentPage/pageName
       site.com/pageName
then you need to specify the absolute path

loc:'site.com/pageName'

Attention! The parameter "showAbsentElement" with true value is mandatory in creating a multi-page tour.

showAbsentElement:true

Start Tour

Element 1 - Element 2 - Element 5

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.multipageBtn').on('click',function(){
		$('body').itour({
			showAbsentElement:true,				
			tourTitle:'Example «multipage»',
			introShow:true,
			steps:[{
				title:'Step 1',				
				content:'Step 1 Description',	
				name:'multipageEl_1',
				loc:'documentation.html'
			},{
				title:'Step 2',
				content:'Step 2 Description',		
				name:'multipageEl_2',
				loc:'documentation.html',
				nextText:'Next Page'
			},{
				title:'Step 3',		
				content:'Step 3 Description',		
				name:'multipageEl_3',
				loc:'demo_multipage.html',
				prevText:'Previous Page'
				
			},{
				title:'Step Trigger',		
				content:'Step 3 Description',		
				name:'.triggerTest',
				loc:'demo_multipage.html',
				prevText:'Previous Page',
				before:function(){
					$('.testBefore').trigger('click');	
				},
				during:function(){
					$('.testDuring').trigger('click');	
				},
				after:function(){
					$('.testAfter').trigger('click');	
				}
			},{
				title:'Step 4',				
				content:'Step 4 Description',	
				name:'multipageEl_4',
				loc:'demo_multipage.html',
				nextText:'Next Page'
				
			},{
				title:'Step 5',				
				content:'Step 5 Description',	
				name:'multipageEl_5',
				loc:'documentation.html'
				
			}],
			lang:{
				introTitle:'Welcome to Multipage demo',
				introContent:'Click "Start" to begin'
			}
		});
		return false;
	});
})
</script> 
<p><a class="btn btn-success multipageBtn" href="#">Start Tour</a></p>
<p>
	<span data-name="multipageEl_1">Element 1 </span>	
	-
	<span data-name="multipageEl_2">Element 2 </span>	
	-
	<span data-name="multipageEl_5">Element 5 </span>	
</p>

<!-- demo_multipage.html-->
<h1 data-name="multipageEl_3">Attention!</h1>
<p data-name="multipageEl_4">This intermediate page.</p>

startStep

Step from which the tour begins.
It may take the values: any positive integer.
In this example, the tour begins with the second step.

Start Tour

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.startStepBtn').on('click',function(){
		$('body').itour({
			startStep:2,	//Step from which the tour begins
			tourTitle:'Example «startStep»',
			tourMapVisible:true,
			steps:[{
				title:'Step 1',				
				content:'Step 1 Description',	
				name:'startStep_1'
			},{
				title:'Step 2',
				content:'Step 2 Description',		
				name:'startStep_2'
			},{
				title:'Step 3',		
				content:'Step 3 Description',		
				name:'startStep_3'
			}]
		});
		return false;
	});
})
</script> 
<p><a class="btn btn-success startStepBtn" href="#">Start Tour</a></p>
<p>
	<span data-name="startStep_1">Element 1 </span>	
	-
	<span data-name="startStep_2">Element 2 </span>	
	-	
	<span data-name="startStep_3">Element 3 </span>		
</p>

tourMapPos

Tour Map Position
It may take the values: "right" or "left"

Start with Map on the LEFT Start with Map on the RIGHT

Element

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.tourMapPosBtn_left').on('click',function(){
		$('body').itour({
			tourTitle:'Example «tourMapPos»',
			tourMapPos:'left',					//Tour Map Position 
			tourMapVisible:true,
			steps:[{
				title:'Step 1',				
				content:'Step 1 Description',	
				name:'tourMapPos'
			}]
		});
		return false;
	});
	$('.tourMapPosBtn_right').on('click',function(){
		$('body').itour({
			tourTitle:'Example «tourMapPos»',
			tourMapPos:'right',					//Tour Map Position 
			tourMapVisible:true,
			steps:[{
				title:'Step 1',				
				content:'Step 1 Description',	
				name:'tourMapPos'
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success tourMapPosBtn_left" href="#">Start with Map on the LEFT</a>
	<a class="btn btn-success tourMapPosBtn_right" href="#">Start with Map on the RIGHT</a>
</p>
<p>
	<span data-name="tourMapPos">Element</span>		
</p>	

tourMapJump

If set to false, then links of steps on the tour map will not be clickable

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.mapJumpBtn').on('click',function(){
		$('body').itour({
			tourTitle:'tourMapJump:false',
			tourMapJump:false,	
			tourMapVisible:true,
			steps:[{
				title:'Step 1',				
				content:'Step 1 Description',	
				name:'mapJumpElement_1'
			},{
				title:'Step 2',				
				content:'Step 2 Description',	
				name:'mapJumpElement_2'
			},{
				title:'Step 3',				
				content:'Step 3 Description',	
				name:'mapJumpElement_3'
			}]
		});
		return false;
	});
})
</script> 
<a class="btn btn-success mapJumpBtn" href="#">Start with disabled tourMapJump</a>
<p>
	<span data-name="mapJumpElement_1">Element 1</span>
	-
	<span data-name="mapJumpElement_2">Element 2</span>
	-
	<span data-name="mapJumpElement_3">Element 3</span>		
</p>	

tourMapEnable

tour map can be disabled. To do this, set "tourMapEnable" in a false

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.mapEnableBtn').on('click',function(){
		$('body').itour({
			tourTitle:'tourMapEnable:false',
			tourMapEnable:false,	
			modalCancelVisible:true,
			steps:[{
				title:'Step 1',				
				content:'Step 1 Description',	
				name:'mapEnableElement_1'
			},{
				title:'Step 2',				
				content:'Step 2 Description',	
				name:'mapEnableElement_2'
			},{
				title:'Step 3',				
				content:'Step 3 Description',	
				name:'mapEnableElement_3'
			}]
		});
		return false;
	});
})
</script> 
<a class="btn btn-success mapEnableBtn" href="#">Start with disabled tourMap</a>
<p>
	<span data-name="mapEnableElement_1">Element 1</span>
	-
	<span data-name="mapEnableElement_2">Element 2</span>
	-
	<span data-name="mapEnableElement_3">Element 3</span>		
</p>	

tourMapVisible

Specifies to show or hide the map of the tour at the start of the tour. It may take the values: false or true

For example, two variants are demonstrated:

Variant 1: Disable the tour map at a certain step;
Variant 2: Enable the tour map at a certain step;

Variant 1 Variant 2

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.mapVisibleBtn_1').on('click',function(){
		$('body').itour({
			tourTitle:'tourMapVisible_1',
			tourMapVisible:true,
			steps:[{
				title:'Step 1',				
				content:'Step 1 Description',	
				name:'mapVisibleElement_1'
			},{
				title:'Step 2',				
				content:'Step 2 Description',	
				name:'mapVisibleElement_2',
				before:function(){
					$('html').removeClass('hNavOpen');	
					$('.hNavBtn').hide();
				},
				after:function(){
					$('html').addClass('hNavOpen');	
					$('.hNavBtn').show();
				}
			},{
				title:'Step 3',				
				content:'Step 3 Description',	
				name:'mapVisibleElement_3'
			}]
		});
		return false;
	});
	
	$('.mapVisibleBtn_2').on('click',function(){
		$('body').itour({
			tourTitle:'tourMapVisible_2',
			create:function(){
				$('html').removeClass('hNavOpen');
				$('.hNavBtn').hide();	
			},
			steps:[{
				title:'Step 1',				
				content:'Step 1 Description',	
				name:'mapVisibleElement_1'
			},{
				title:'Step 2',				
				content:'Step 2 Description',	
				name:'mapVisibleElement_2',
				before:function(){
					$('html').addClass('hNavOpen');	
					$('.hNavBtn').show();
				},
				after:function(){
					$('html').removeClass('hNavOpen');
					$('.hNavBtn').hide();	
				}
			},{
				title:'Step 3',				
				content:'Step 3 Description',	
				name:'mapVisibleElement_3'
			}]
		});
		return false;
	});
})
</script> 

<a class="btn btn-success mapVisibleBtn_1" href="#">Variant 1</a>
<a class="btn btn-success mapVisibleBtn_2" href="#">Variant 2</a>

<span data-name="mapVisibleElement_1">Element 1</span>
<span data-name="mapVisibleElement_2">Element 2</span>
<span data-name="mapVisibleElement_3">Element 3</span>

spacing

Indent highlighting around the element, px.
It may take the values: any positive integer

Default Spacing (10px) Spacing 30px Without Spacing (0px)

Element

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.spacingBtn_default').on('click',function(){
		$('body').itour({
			tourTitle:'Example «spacing»',
			steps:[{
				title:'Step 1',				
				content:'Step 1 Description',	
				name:'spacing'	
			}]
		});
		return false;
	});
	
	$('.spacingBtn_big').on('click',function(){
$('body').itour({
			tourTitle:'Example «spacing»',
			spacing:30,
			steps:[{
				title:'Step 1',				
				content:'Step 1 Description',	
				name:'spacing'	
			}]
		});
		return false;
	});
		
	$('.spacingBtn_empty').on('click',function(){
		$('body').itour({
			tourTitle:'Example «spacing»',
			spacing:0,
			steps:[{
				title:'Step 1',				
				content:'Step 1 Description',	
				name:'spacing'	
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success spacingBtn_default" href="#">Default Spacing (10px)</a>
	<a class="btn btn-success spacingBtn_big" href="#">Spacing 30px</a>
	<a class="btn btn-success spacingBtn_empty" href="#">Without Spacing (0px)</a>
</p>
<p>
	<span data-name="spacing">Element</span>			
</p>

contentPosition

Position of message.
It may take the values: "auto", "center" or positioning code: "xxx"

"auto" - The plugin automatically choose the best position out of 36 available to display a tour's message.

"center" - The message is displayed in the center of screen and no element is highlighted. The parameter "name" in this case is not required!

"xxx" - Code which indicates the position of the window with the message

tll, tlc, tlr, tcl, tcc, tcr, trl, trc, trr, rtt, rtc, rtb, rct, rcc, rcb, rbt, rbc, rbb, brr, brc, brl, bcr, bcc, bcl, blr, blc, bll, lbb, lbc, lbt, lcb, lcc, lct, ltb, ltc, ltt

"xxx" - First Symbol: The position of message a relatively selected item.
It may take the values: t (top),r (right),b (bottom),l (left)

"xxx" - Second Symbol: The position of corner a relatively selected item.
a) if first symbol is "l" or "r" it may take the values:t (top), c (center),b (bottom);
b) if first symbol is "t" or "b" it may take the values:l (left), c (center),r (right);

"xxx" - Third Symbol: The position of the window with a message a relatively coner.
a) if first symbol is "l" or "r" it may take the values:t (top), c (center),b (bottom);
b) if first symbol is "t" or "b" it may take the values:l (left), c (center),r (right);

Start Tour

Element

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.contentPositionBtn').on('click',function(){
		$('body').itour({
			tourTitle:'Example «contentPosition»',
			steps:[{
				title:'contentPosition:"auto"',				
				content:'The plugin automatically choose the best position out of 36 available to display a tour\'s message',	
				contentPosition:'auto',
				name:'contentPosition'
			},{
				title:'contentPosition:"trr"',				
				content:'Top > Right > Right',	
				contentPosition:'trr',
				name:'contentPosition'
			},{
				title:'contentPosition:"rcc"',				
				content:'Right > Center > Center',	
				contentPosition:'rcc',
				name:'contentPosition'
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success contentPositionBtn" href="#">Start Tour</a>
</p>
<p>
	<span data-name="contentPosition">Element</span>			
</p>	

event

An event that you need to do to go to the next step
It may take the values: "next", "click", "mousedown", "mouseup", "mouseenter", "keydown", "keyup", "blur", "submit" and others jQuery events.

Start Tour

Element

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.eventBtn').on('click',function(){
		$('body').itour({
			tourTitle:'Example «event»',
			steps:[{
				title:'Step 1',				
				content:'Move your cursor over the "element"',	
				contentPosition:'auto',
				name:'event',					
				event:'mouseenter'
			},
			{
				title:'Step 2',				
				content:'To continue, click on the "element"',	
				contentPosition:'auto',
				name:'event',					
				event:'click'
			},
			{
				title:'Step 3',				
				content:'To continue, click on the "element" again or click "End" button',	
				contentPosition:'auto',
				name:'event',
				during:function(){
					$('[data-name="event"]').on('click',function(){
						$('.hNext').trigger('click');	
					});
				},
				after:function(){
					$('[data-name="event"]').off('click');
				}					
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success eventBtn" href="#">Start Tour</a>
</p>
<p>
	<span data-name="event">Element</span>			
</p>			

trigger

An event which is generated on the selected element, in the transition from step to step. jQuery events
It may take the values: Name of Event or false

Start Tour

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.triggerBtn').on('click',function(){
		$('body').itour({
			tourTitle:'Example «trigger»',
			steps:[{
				title:'Step 1',				
				content:'Step 1 description',	
				contentPosition:'tcc',
				name:'trigger_1',					
				trigger:'click'		
			},{
				title:'Step 2',				
				content:'Step 2 description',	
				contentPosition:'tcc',
				name:'trigger_2',					
				trigger:'click'		
			},{
				title:'Step 3',				
				content:'Step 3 description',	
				contentPosition:'tcc',
				name:'trigger_3',					
				trigger:'click'		
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success triggerBtn" href="#">Start Tour</a>
</p>
<p>
	<label data-name="trigger_1"> <input type="radio" name="triggerExample"> Element 1</label>
	-
	<label data-name="trigger_2"> <input type="radio" name="triggerExample"> Element 2</label>
	-
	<label data-name="trigger_3"> <input type="radio" name="triggerExample"> Element 3</label>
</p>				

Auto Start - #hash

Use a small additional snippet of code and the hash link in the page URL

Autostart on this page occurs after changing the hash of the link in the address bar to the value "itour"

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	var startTour = function(){
		$('body').itour({
			showAbsentElement:true,				
			tourTitle:'Example «Auto Start»',
			introShow:true,
			steps:[{
				title:'Step 1',		
				content:'Content 1',		
				name:'.asEl_1'
			},{
				title:'Step 2',		
				content:'Content 2',		
				name:'.asEl_2'
			},],
			lang:{
				introTitle:'Welcome to Auto Start demo'
			}
		});	
	}
	
	/*Check hash link in page URL*/
	var detectHash = function(){
		if(location.hash == '#itour'){
			location.hash = '';
			startTour();	
		}
	}
	/*Add event to hyperlink with hash */
	$(window).on('hashchange', function() {
		detectHash();
	});
	detectHash();
	
	/*Add event to button*/
	$('.autoStartBtn').on('click',function(){
		startTour();
		return false;
	});
});
</script> 

<a class="btn btn-success autoStartBtn" href="#">Start Tour</a>

<span class="asEl_1"> Element 1</span>
-
<span class="asEl_2"> Element 2</span>				

Auto Start - always

Autostart on this page occurs immediately after the page is loaded

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	var startTour = function(){
		$('body').itour({
			showAbsentElement:true,				
			tourTitle:'Example «Auto Start»',
			introShow:true,
			steps:[{
				title:'Step 1',		
				content:'Content 1',		
				name:'.asEl_1'
			},{
				title:'Step 2',		
				content:'Content 2',		
				name:'.asEl_2'
			},],
			lang:{
				introTitle:'Welcome to Auto Start demo'
			}
		});	
	}

	/*Add event to button*/
	$('.start-tour').on('click',function(){
		startTour();
		return false;
	});
	
	/*Start Tour*/
	startTour();
});
</script> 

<a class="btn btn-success autoStartBtn" href="#">Start Tour</a>

<span class="asEl_1"> Element 1</span>
-
<span class="asEl_2"> Element 2</span>				

Auto Start - timeout

Autostart on this page occurs immediately after the page is loaded
A new autostart is possible only after the set time in "tourTimeout" parameter

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	/*Set Timeout*/
	var tourTimeout = 5000;
	
	/*Pligon Initialization*/
	var callTour = function(){
		$('body').itour({
			showAbsentElement:true,				
			tourTitle:'Example «Auto-Timeout»',
			introShow:true,
			steps:[{
				title:'Step 1',		
				content:'Content 1',		
				name:'.asEl_1'
			},{
				title:'Step 2',		
				content:'Content 2',		
				name:'.asEl_2'
			},],
			lang:{
				introTitle:'Welcome to Auto Start demo'
			},
			create: function(){
				localStorage.setItem('itourShowed', '1');	
			},
			end: function(){
				localStorage.setItem('itourLastDate', new Date());	
			}
		});		
	}
	
	/*Checking the tour status*/
	var preCallTour = function(){
		if(localStorage.getItem('itourCalled')){	
			callTour();
		}else{
			if(localStorage.getItem('itourShowed')){
				var interval = Date.parse(new Date(Date.now() - Date.parse(localStorage.getItem('itourLastDate') || '1/1/1917')));
				if(interval > tourTimeout){
					callTour();
				}else{
					return false;
				}
			}else{
				callTour();
			}	
		}
		localStorage.removeItem('itourCalled');		
	}
	
	/*Running the status check when the page loads*/
	preCallTour();

	/*Adding a tour call by button*/
	$('.start-tour').on('click',function(){
		localStorage.setItem('itourCalled', '1');
		preCallTour();
		return false;
	});
});
</script> 

<a class="btn btn-primary start-tour" href="#">Start Tour</a>
<span class="asEl_1"> Element 1</span>
<span class="asEl_2"> Element 2</span>			

Auto Start - timeout & flag

Autostart on this page occurs immediately after the page is loaded
1. New start depends on the set sleep time of the tour.
2. If the user viewed the tour to the end, Auto Start is disabled forever

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$(window).on('load',function(){
	/*Set Timeout*/
	var tourTimeout = 5000;
	
	/*Pligon Initialization*/
	var callTour = function(){
		$('body').itour({
			showAbsentElement:true,				
			tourTitle:'Example «Auto-Timeout-Flag»',
			introShow:true,
			steps:[{
				title:'Step 1',		
				content:'Content 1',		
				name:'.asEl_1'
			},{
				title:'Step 2',		
				content:'Content 2',		
				name:'.asEl_2'
			},],
			lang:{
				introTitle:'Welcome to Auto Start demo'
			},
			create: function(){
				localStorage.setItem('itourShowed', '1');	
			},
			abort: function(){
				localStorage.setItem('itourLastDate', new Date());	
			},
			finish: function(){
				localStorage.setItem('itourFinished', '1');
			}
		});		
	}
	
	/*Checking the tour status*/
	var preCallTour = function(){
		if(localStorage.getItem('itourCalled')){	
			callTour();
		}else{
			if(localStorage.getItem('itourShowed')){
				if(localStorage.getItem('itourFinished')){
					return false;
				}else{
					var interval = Date.parse(new Date(Date.now() - Date.parse(localStorage.getItem('itourLastDate') || '1/1/1917')));
					if(interval > tourTimeout){
						callTour();
					}else{
						return false;
					}
				}
			}else{
				callTour();
			}	
		}
		localStorage.removeItem('itourCalled');		
	}
	
	/*Running the status check when the page loads*/
	preCallTour();

	/*Adding a tour call by button*/
	$('.start-tour').on('click',function(){
		localStorage.setItem('itourCalled', '1');
		preCallTour();
		return false;
	});
});
});
</script> 

<a class="btn btn-primary start-tour" href="#">Start Tour</a> 
<span class="asEl_1"> Element 1</span>
<span class="asEl_2"> Element 2</span>			

Search of elements

If you can not add an "data-name" attribute for the required elements manually, then make a search on the name of the class, id, or by other attributes

Start Tour

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.callBtn').on('click',function(){
		$('body').itour({
			tourTitle:'Example «call»',
			steps:[{
				title:'Step 1',				
				content:'Step 1 description',	
				name:'.call_1'
			},{
				title:'Step 2',				
				content:'Step 2 description',	
				name:'#call_2'
			},{
				title:'Step 3',				
				content:'Step 3 description',	
				name:'[title="call_3"]'
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success callBtn" href="#">Start Tour</a>
</p>
<p>
	<span class="call_1"> Element 1</span>
	-
	<span id="call_2"> Element 2</span>
	-
	<span title="call_3"> Element 3</span>
</p>				

Only Message

If you set value "center" for parameter "contentPosition", then the message is displayed in the center of screen and no element is highlighted.

The parameter "name" in this case is not required!

Start Tour

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.messageBtn').on('click',function(){
		$('body').itour({
			tourTitle:'Only Message',
			steps:[{
				title:'Step 1',				
				content:'Step 1 description',	
				contentPosition:'center'
			},
			{
				title:'Step 2',				
				content:'Step 2 description',	
				contentPosition:'center'
			},
			{
				title:'Step 3',				
				content:'Step 3 description',	
				contentPosition:'center'
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success messageBtn" href="#">Start Tour</a>
</p>		

Image Content

Use the "image" parameter to add a picture to the message box. As the value specify the path to the image.

Start Tour

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.imageBtn').on('click',function(){
		$('body').itour({
			tourTitle:'Image Content',
			steps:[{
				image:'doc_files/images/slide_1.gif',
				title:'Step 1',				
				content:'Step 1 description',	
				contentPosition:'center'
			},
			{
				image:'doc_files/images/slide_2.gif',
				title:'Step 2',				
				content:'Step 2 description',	
				contentPosition:'center'
			},
			{
				image:'doc_files/images/slide_3.gif',
				title:'Step 3',				
				content:'Step 3 description',	
				contentPosition:'center'
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success imageBtn" href="#">Start Tour</a>
</p>		

Overlay Opacity

For each step, you can specify the different opacity values of the overlay layer.

Start Tour

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.opacityBtn').on('click',function(){	
		$('body').itour({
			tourTitle:'Overlay Opacity',
			steps:[{
				title:'Default',				
				content:'overlayOpacity:0.5',	
				name:'opacity_1'
			},{
				title:'Custom',				
				content:'overlayOpacity:0.2',	
				name:'opacity_2',					
				overlayOpacity:0.2
			},{
				title:'Transparent',				
				content:'overlayOpacity:0',	
				name:'opacity_3',					
				overlayOpacity:0
			}]
		});
		return false;
	});
})
</script>
<p>
	<a class="btn btn-success opacityBtn" href="#">Start Tour</a>
</p>
<p>
	<span data-name="opacity_1"> Element 1</span>
	-
	<span data-name="opacity_2"> Element 2</span>
	-
	<span data-name="opacity_3"> Element 3</span>
</p>			

Highlight Class

The highlighted item is assigned to the class "itour-highlight". This class can be used for alternative highlight of element.

Start Tour

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.highlightBtn').on('click',function(){	
		$('body').itour({
			tourTitle:'Highlight Class',
			steps:[{
				title:'Step 1',				
				content:'Step 1 description',	
				name:'highlight_1',					
				overlayOpacity:0
			},{
				title:'Step 2',				
				content:'Step 2 description',	
				name:'highlight_2',					
				overlayOpacity:0
			},{
				title:'Step 3',				
				content:'Step 3 description',	
				name:'highlight_3',					
				overlayOpacity:0
			}]
		});
		return false;
	});
})
</script> 
<style>
.highlight-demo.itour-highlight {
	box-shadow:0 0 0 5px #96E7ED;
}
</style>
<p>
	<a class="btn btn-success highlightBtn" href="#">Start Tour</a>
</p>
<p>
	<span class="highlight-demo" data-name="highlight_1"> Element 1</span>
	-
	<span class="highlight-demo" data-name="highlight_2"> Element 2</span>
	-
	<span class="highlight-demo" data-name="highlight_3"> Element 3</span>
</p>			

Custom Buttons Text

The buttons may contain any text.

Start Tour

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.buttonsBtn').on('click',function(){	
		$('body').itour({
			CSSClass:'buttonsDemo',
			tourTitle:'Custom Buttons Text',
			lang:{
				cancelText:	'Cancel',
				hideText: 'Hide',
				tourMapText:'|||',
				tourMapTitle: 'Step List',
				nextTextDefault:'Next Step',
				prevTextDefault:'Back',
				endText:'Done'
			},
			steps:[{
				title:'Step 1',				
				content:'Description 1',	
				name:'buttons_1'
			},{
				title:'Step 2',				
				content:'Description 2',	
				name:'buttons_2',					
				nextText:'Continue'	,
				prevText:'Return'
			},{
				title:'Step 3',				
				content:'Description 3',	
				name:'buttons_3'
			}]
		});
		return false;
	});
})
</script> 
<style>
.buttonsDemo .hNavBtn {
	line-height:33px;
	font-weight:700;
}
</style>
<p>
	<a class="btn btn-success buttonsBtn" href="#">Start Tour</a>
</p>
<p>
	<span data-name="buttons_1"> Element 1</span>
	-
	<span data-name="buttons_2"> Element 2</span>
	-
	<span data-name="buttons_3"> Element 3</span>
</p>	

Localization

To localize enough use "lang" parameter.

Start Tour

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.langBtn').on('click',function(){	
		$('body').itour({
			tourMapVisible:true,
			tourTitle:'本土化',
			lang:{
				cancelText:	'取消旅遊',
				hideText: '隱藏地圖',
				tourMapText:'•••',
				tourMapTitle: '地圖之旅',
				nextTextDefault:'以下',
				prevTextDefault:'前',
				endText:'結束',
				contDialogTitle:'繼續未完成的旅遊？',
				contDialogContent:'點擊"繼續" 開始與步上最後一次完成。',
				contDialogBtnBegin:'從年初開始',
				contDialogBtnContinue:'繼續'
			},
			steps:[{
				title:'第一步',				
				content:'第一說明',	
				name:'lang_1'
			},{
				title:'第二步',				
				content:'第二描述',	
				name:'lang_2'	
			},{
				title:'第三步',				
				content:'第三描述',	
				name:'lang_3'
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success langBtn" href="#">Start Tour</a>
</p>
<p>
	<span data-name="lang_1"> Element 1</span>
	-
	<span data-name="lang_2"> Element 2</span>
	-
	<span data-name="lang_3"> Element 3</span>
</p>

Localization 2

To localize enough to connect the language file

Start Tour

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script src="js/localization/itour-es.js"></script>	
<script>
$(window).on('load',function(){
	$('.lang2Btn').on('click',function(){	
		$('body').itour({
			tourMapVisible:true,
			tourTitle:'La localización 2',
			steps:[{
				title:'Paso 1',				
				content:'Descripción 1',	
				name:'lang2_1'
			},{
				title:'Paso 1',				
				content:'Descripción 1',	
				name:'lang2_2'
			},{
				title:'Paso 1',				
				content:'Descripción 1',	
				name:'lang2_3'
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success lang2Btn" href="#">Start Tour</a>
</p>
<p>
	<span data-name="lang2_1"> Element 1</span>
	-
	<span data-name="lang2_2"> Element 2</span>
	-
	<span data-name="lang2_3"> Element 3</span>
</p>	

Text Direction

The direction property specifies the text direction/writing direction.

Start Tour

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script src="js/localization/itour-ar.js"></script>	
<script>
$(window).on('load',function(){
	$('.dirBtn').on('click',function(){	
		$('body').itour({
			textDirection:'rtl',
			tourTitle:'اتجاه النص',
			steps:[{
				title:'الخطوة الأولى',				
				content:'وصف الخطوة الأولى',	
				name:'dir_1'
			},{
				title:'الخطوة الثانية',				
				content:'وصف الخطوة الثانية',
				name:'dir_2'
			},{
				title:'الخطوة الثالثة',
				content:'وصف الخطوة الثالثة',
				name:'dir_3'
			}]
		});
		return false;
	});
})
</script> 
<a class="btn btn-success dirBtn" href="#">Start Tour</a>
<p>
	<span data-name="dir_1"> Element 1</span>
	-
	<span data-name="dir_2"> Element 2</span>
	-
	<span data-name="dir_3"> Element 3</span>
</p>	

Disable Element

The parameter "disable" blocks access to element.

Start Tour

-

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.disableBtn').on('click',function(){	
		$('body').itour({
			tourTitle:'Disable Element',
			steps:[{
				title:'disable:true',				
				content:'This item is not available for editing',	
				name:'disable_1',					
				disable:true
			},{
				title:'disable:false',				
				content:'This item is available',	
				name:'disable_2'
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success disableBtn" href="#">Start Tour</a>
</p>
<p>
	<input type="text" data-name="disable_1" value="Disabled element"></span>
	-
	<input type="text" data-name="disable_2" value="Enabled element"></span>
</p>		

Overlay Clickable

The parameter "overlayClickable" enables or disables the click event for overlying layer.

Start Tour

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.overlayBtn').on('click',function(){	
		$('body').itour({
			tourTitle:'Overlay Clickable',
			overlayClickable:false,
			steps:[{
				title:'overlayClickable:false',				
				content:'Overlay layer is now inactive. If you click on it, the tour will not be closed, as it usually happens.',	
				contentPosition:'center'
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success overlayBtn" href="#">Start Tour</a>
</p>

Cancel button in modal

The parameter "modalCancelVisible" shows a cancel button in modal window.
The presence of this button is desirable if you turn off a clickability of overlay layer.

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.modalCancelVisible').on('click',function(){	
		$('body').itour({
			tourTitle:'Modal Cancel button',
			modalCancelVisible:true,
			steps:[{
				title:'modalCancelVisible:true',				
				content:'You can stop tour by clicking the button in the upper right corner of this modal window.',	
				contentPosition:'center'
			}]
		});
		return false;
	});
})
</script> 
<a class="btn btn-success modalCancelVisible" href="#">Start Tour</a>

Changing Styles

The parameter "CSSClass" assign for tour a unique class name to change the display styles of the tour.

Start Tour

Element 1

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.styleBtn').on('click',function(){	
		$('body').itour({
			CSSClass:'myBlackTheme',
			tourTitle:'Changing Styles',
			steps:[{
				title:'CSSClass: "myBlackTheme"',				
				content:'In this example you can see the modified design of tour.',	
				name:'style_1',		
				overlayOpacity:0.9
			}]
		});
		return false;
	});
})
</script> 
<style>
.myBlackTheme .hContBlock {
	background-color:#000;
	color:#999;
}
.myBlackTheme .hContFooter {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
.myBlackTheme .hBtn {
	color:#fff
}
.myBlackTheme .hBtn:hover {
	background: rgba(255, 255, 255, 0.2);
}
.myBlackTheme .hNavBtn:hover {
	background: rgba(255, 255, 255, 0.2);
}
.myBlackTheme .hOverlay {
	background-color: #23313F;
}
.myBlackTheme .hContPos::after {
	border-color:#000;
}
.myBlackTheme .hNavPos {
    background-color: #000;
    color: #999;
}
.myBlackTheme .hStepItem {
    color: rgba(255, 255, 255, 0.87);
}
.myBlackTheme .hStepItem:active, 
.myBlackTheme .hStepItem.hCur, 
.myBlackTheme .hClose:active {
    background-color: rgba(255, 255, 255, 0.15);
}
.myBlackTheme .hNavAction {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.myBlackTheme .hNavHeader {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.myBlackTheme .hStepItem::after, 
.myBlackTheme .hStepItem::before {
    background-color: rgba(255, 255, 255, 0.1);
}
.myBlackTheme .hStepItem.hSuccess::after, 
.myBlackTheme .hStepItem.hSuccess::before {
    background-color: #3c0;
}
</style>
<p>
	<a class="btn btn-success styleBtn" href="#">Start Tour</a>
</p>
<p>
	<span data-name="style_1"> Element 1</span>
</p>

Dynamic Content

You can highlight items that are created in the course of the tour.

Click to create and add a new item into code.

Create Element Remove Element

And start your tour.

Start Tour

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.dynamicBtn').on('click',function(){	
		$('body').itour({
			tourTitle:'Dynamic Content',
			steps:[{
				title:'Highlight of a new element',				
				content:'Click on it to create another one element' ,	
				name:'#myNewElement_1',
				event:'click'
			},{
				title:'Highlight of a other new element',				
				content:'',	
				name:'#myNewElement_2'
			}]
		});
		return false;
	});
	
	$('.dynamicAdd').on('click',function(){
		if(!$('#myNewElement_1').length){
		
			//Create a new item
			var myNewElement = $('<b id="myNewElement_1">I am a new element. Click me!</b>');
			
			//Add new element in to page
			myNewElement.appendTo('.dynamicWrap');
		}
		return false;	
	})
	
	$('.dynamicRemove').on('click',function(){
		//Remove new element
		$('#myNewElement_1').remove();
		$('#myNewElement_2').remove();
		return false;	
	})
	
	$(document).on('click','#myNewElement_1',function(){
		if(!$('#myNewElement_2').length){
		
			//Create a new item
			var myNewElement_2 = $('<b id="myNewElement_2">I am another one a new element!</b>');
			
			//Add new element in to page
			myNewElement_2.appendTo('.dynamicWrap');
		}
		return false;	
	})
})
</script> 
<style>
#myNewElement_1 {
	border:2px solid green;
	padding:5px;
	cursor:pointer;
}
#myNewElement_2 {
	border:2px solid blue;
	padding:5px;
	cursor:pointer;
	margin-left:30px;
}
</style>
<p>Click to create and add a new item into code.</p>
<p>
	<a class="btn btn-primary dynamicAdd" href="#">Create Element</a>
	<a class="btn btn-warning dynamicRemove" href="#">Remove Element</a>
</p>
<p>And start your tour.</p>
<p>
	<a class="btn btn-success dynamicBtn" href="#">Start Tour</a>
</p>
<div class="dynamicWrap"></div>

Skip Step

Step can be skipped if you set parameter "skip" to true.

Start Tour

Element 1 - Element 2 - Element 3

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.skipBtn').on('click',function(){	
		$('body').itour({
			tourTitle:'Skip Step',
			steps:[{
				title:'Highlight First Element',				
				content:'Any Content' ,	
				name:'#skipElement_1'
			},{
				title:'Highlight Second Element',				
				content:'Any Content',	
				name:'#skipElement_2',
				skip:true
			},{
				title:'Highlight Third Element',				
				content:'Any Content',	
				name:'#skipElement_3'
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success skipBtn" href="#">Start Tour</a>
</p>
<p>
	<span id="skipElement_1">Element 1</span>
	-
	<span id="skipElement_2">Element 2</span>
	-
	<span id="skipElement_3">Element 3</span>			
</p>

showAbsentElement

Set parameter "showAbsentElement" to true value to show absent element in tour map.

Start Tour with "showAbsentElement: true" Start Tour with "showAbsentElement: false"

Element 1 - Element 4

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.showAbsentBtn_1').on('click',function(){	
		$('body').itour({
			showAbsentElement:true,
			tourMapVisible:true,
			tourTitle:'showAbsentElement:true',
			steps:[{
				title:'Highlight First Element',				
				content:'Any Content' ,	
				name:'#showAbsentElement_1'
			},{
				title:'Highlight Second Element',				
				content:'Any Content',	
				name:'#showAbsentElement_2'
			},{
				title:'Highlight Third Element',				
				content:'Any Content',	
				name:'#showAbsentElement_3'
			},{
				title:'Highlight Third Element',				
				content:'Any Content',	
				name:'#showAbsentElement_4'
			}]
		});
		return false;
	});
	
	$('.showAbsentBtn_2').on('click',function(){	
		$('body').itour({
			showAbsentElement:false,
			tourMapVisible:true,
			tourTitle:'showAbsentElement:false',
			steps:[{
				title:'Highlight First Element',				
				content:'Any Content' ,	
				name:'#showAbsentElement_1'
			},{
				title:'Highlight Second Element',				
				content:'Any Content',	
				name:'#showAbsentElement_2'
			},{
				title:'Highlight Third Element',				
				content:'Any Content',	
				name:'#showAbsentElement_3'
			},{
				title:'Highlight Third Element',				
				content:'Any Content',	
				name:'#showAbsentElement_4'
			}]
		});
		return false;
	});
	
	
})
</script> 
<style>

</style>
<p>
	<a class="btn btn-success showAbsentBtn_1" href="#">Start Tour with "showAbsentElement: true"</a>
	<a class="btn btn-success showAbsentBtn_2" href="#">Start Tour with "showAbsentElement: false"</a>
</p>
<p>
	<span id="showAbsentElement_1">Element 1</span>
	-
	<span id="showAbsentElement_4">Element 4</span>			
</p>

Events and Delay

These events can trigger various functions before, during and after the demonstration step of tour.

To save the queue of functions, the events is used in conjunction with "delayBefore" and "delayAfter" parameters

Start Tour

Events:

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.logWrap').val('');
	var logIndex = 0;
	var logView = function(mess){
		$('.logWrap').val($('.logWrap').val() + '\n'+ (logIndex++) +': '+ mess)
	};
	$('.beforeBtn').on('click',function(){	
		$('body').itour({
			tourTitle:'"before" Event',
			steps:[{
				title:'Step 1',				
				content:'Any Content 1',	
				name:'.logWrap',
				before:function(){
					logView('Step 1: before')
					logView('Step 1: Any function has started')
					setTimeout(function(){
						logView('Step 1: Any function has completed')
					},1000)
				},
				during:function(){
					logView('Step 1: during')
				},
				after:function(){
					logView('Step 1: after')
					logView('Step 1: Any function has started')
					setTimeout(function(){
						logView('Step 1: Any function has completed')
					},1000)
				},
				delayBefore:1300,
				delayAfter:1300
			},{
				title:'Step 2',					
				content:'Any Content 2',	
				name:'.logWrap',
				before:function(){
					logView('Step 2: before')
					logView('Step 2: Any function has started')
					setTimeout(function(){
						logView('Step 2: Any function has completed')
					},1000)
				},
				during:function(){
					logView('Step 2: during')
				},
				after:function(){
					logView('Step 2: after')
					logView('Step 2: Any function has started')
					setTimeout(function(){
						logView('Step 2: Any function has completed')
					},1000)
				},
				delayBefore:1300,
				delayAfter:1300
			}]
		});
		return false;
	});
})
</script> 
<style>
.logWrap {
	width:100%;
	max-width:100%;
	font-size:14px;
	height:400px;
}
.logItem { 
	padding:2px 0; 
	border-top:1px solid #ccc;
}
</style>
<p>
	<a class="btn btn-success beforeBtn" href="#">Start Tour</a>
</p>
<h4>Events:</h4>
<textarea spellcheck="false" class="logWrap"></textarea>

Video

Description of step may consist of video content

Start Tour

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.videoBtn').on('click',function(){	
		$('body').itour({
			tourTitle:'Video Content',
			steps:[{
				title:'Youtube',				
				content:'Any Content 1',	
				name:'#videoElement_1',
				"during":function(){
					var videoTag = '<iframe width="320" height="180" src="https://www.youtube.com/embed/WDFaz98BG1U?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>';
					$(".hContImage").html(videoTag);
				}
			},{
				title:'HTML5 Video',				
				content:'Any Content 2',	
				name:'#videoElement_2',
				"during":function(){
					var videoTag = '<video width="320" height="180" controls="controls" poster="video/duel.jpg"><source src="http://www.masscode.top/files/video/itour.webm" type="video/webm"></video>';
					$(".hContImage").html(videoTag);
				}
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success videoBtn" href="#">Start Tour</a>
</p>
<span id="videoElement_1">Any Element 2</span>
-
<span id="videoElement_2">Any Element 1</span>

Audio

Description of step may consist of Audio content

Start Tour

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.audioBtn').on('click',function(){	
		$('body').itour({
			tourTitle:'Audio Content',
			steps:[{
				title:'HTML5 Audio',				
				content:'Any Content 1',	
				name:'#audioElement_1',
				"during":function(){
					var audioTag = '<div style="margin:15px;"><audio style="width:100%;" src="http://www.masscode.top/files/audio/Above_and_Beyond.mp3" preload="auto" controls></audio></div>';
					$(".hContImage").html(audioTag);
				}
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success audioBtn" href="#">Start Tour</a>
</p>
<span id="audioElement_1">Any Element 1</span>

Checking the conditions

Function in which you can carry out any verification by clicking on the "Next" button.
If the function returns True, the step will be switched.
If the function returns "False", an error message will appear in the message window

Start Tour

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>
<script>
$(window).on('load',function(){
	$('.checkBtn').on('click',function(){	
		$('body').itour({
			'showAbsentElement':true,				
			'tourTitle':'Example «Auto Start»',
			'steps':[{
				'title':'Step 1',		
				'content':'Content 1',		
				'name':'.checkEl_1',
				'checkNext': {
					'func': function(){
						if($.trim($('.checkEl_1').val()) == ''){
							return false;
						}else{
							return true;	
						}
					},
					'messageError': 'The field can not be empty!'
				}
			},{
				'title':'Step 2',		
				'content':'Click to Button',		
				'name':'.checkEl_2',
				'event':'click'
			},{
				'title':'Step 3',		
				'content':'Very good! You\'ve done it!',
				'contentPosition':'center'
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success checkBtn" href="#">Start Tour</a>
</p>
<input class="checkEl_1" type="text" value=""> 
<input type="button" class="checkEl_2" value="Submit">

itour & Select2 plugin

Select2 is jQuery replacement for select boxes. Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. Download Select2

Start Tour

First element - Any option 1 Any option 2 Any option 3 - Any option 1 Any option 2 Any option 3 - Another element

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"></script>			
	
<script>
$(window).on('load',function(){
	
	/*call select2 plugin*/
	$('.mySelect').select2();
	
	/*Fix when you select the already active value*/
	$('.mySelect').on('select2:closing', function (evt) {
		$(this).trigger('change');
	});
	
	/*call itour*/
	$('.testBtn').on('click',function(){
		$('body').itour({
			showAbsentElement:true,
			tourTitle:'Test',
			steps:[{
				title:'This is First element of the tour',	
				name:'#target_1',
				content:'click "next" to continue'
			},{
				title:'This is your First pseudo-select',	
				/*Specify an pseudo-select element (select2)*/
				name:'.mySelect-1 + .select2', 
				content:'Click it',
				/*To open element need "click" event */
				event:'click'
			},{
				title:'This is the available options',	
				/*Specify an element with pseudo-options for highlight*/
				name:'.select2-dropdown',
				content:'Choose an option',
				/*Specify an event "change" and element for this event in array*/
				event:['change',$('.mySelect-1')],
				delayBefore:100,
				before:function(){
					$('.mySelect-1').select2("open"); 
				}
			},{
				title:'This is your Second pseudo-select',	
				/*Specify an pseudo-select element (select2)*/
				name:'.mySelect-2 + .select2', 
				content:'Click it',
				/*To open element need "click" event */
				event:'click'
			},{
				title:'This is the available options',	
				/*Specify an element with pseudo-options for highlight*/
				name:'.select2-dropdown',
				content:'Choose an option',
				/*Specify an event "change" and element for this event in array*/
				event:['change',$('.mySelect-2')],
				delayBefore:100,
				before:function(){
					$('.mySelect-2').select2("open"); 
				}
			},{
				title:'This is another element of the tour',	
				name:'#target_4',
				content:'To complete the tour, click "end"'
			}]
		});
		return false;
	});

})
</script> 
<a class="btn btn-success testBtn" href="#">Start Tour</a>
<p>
	<span id="target_1">First element</span>
	-
	<select class="mySelect mySelect-1">
		<option value="value1">Any option 1</option>
		<option value="value2">Any option 2</option>
		<option value="value3">Any option 3</option>
	</select>
	-
	<select class="mySelect mySelect-2">
		<option value="value1">Any option 1</option>
		<option value="value2">Any option 2</option>
		<option value="value3">Any option 3</option>
	</select>
	-
	<span id="target_4">Another element</span>
</p>			

itour & jQuery UI Tabs

A single content area with multiple panels, each associated with a header in a list.

Click tabs to swap between content that is broken into logical sections.

Download jQuery UI

Start Tour

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>

<!-- Include jQuery UI -->												
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>	
	
<script>
$(window).on('load',function(){
	
	/*call jQuery UI Tabs plugin*/
	$('#tabs').tabs();
	
	/*call itour*/
	$('.tabsBtn').on('click',function(){
		$('body').itour({
			tourTitle:'jQuery UI Tabs',
			steps:[{
				title:'Tab 1 Link',	
				name:'[href="#tabs-1"]',
				content:'Any content',
				trigger:'click'
			},{
				title:'Tab 1 Content',	
				name:'#tabs-1',
				content:'Any content',
				delayBefore:100,
				before:function(){
					$('[href="#tabs-1"]').trigger('click');
				}
			},{
				title:'Tab 2 Link',	
				name:'[href="#tabs-2"]',
				content:'Any content',
				trigger:'click'
			},{
				title:'Tab 2 Content',	
				name:'#tabs-2',
				content:'Any content',
				delayBefore:100,
				before:function(){
					$('[href="#tabs-2"]').trigger('click');
				}
			},{
				title:'Tab 3 Link',	
				name:'[href="#tabs-3"]',
				content:'Any content',
				trigger:'click'
			},{
				title:'Tab 3 Content',	
				name:'#tabs-3',
				content:'Any content',
				delayBefore:100,
				before:function(){
					$('[href="#tabs-3"]').trigger('click');
				}
			}]
		});
		return false;
	});

})
</script> 
<p><a class="btn btn-success tabsBtn" href="#">Start Tour</a></p>

<div id="tabs">
	<ul>
		<li><a class="tab_link" href="#tabs-1">Nunc tincidunt</a></li>
		<li><a class="tab_link" href="#tabs-2">Proin dolor</a></li>
		<li><a class="tab_link" href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>		

Bootstrap Collapse

Start Tour

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>	
	
<script>
$(window).on('load',function(){
	$('.collapseBtn').on('click',function(){
		$('body').itour({
			showAbsentElement:true,
			tourTitle:'Bootstrap Collapse',
			steps:[{
				title:'First Button',	
				name:'firstCollapseBtn',
				content:'This is First Collapse Button',
			},{
				title:'Hidden Element',	
				name:'hiddenButton', 
				content:'This is hidden button',
				before:function(){
					if($('#collapseExample').is(':hidden')){
						$('[data-name="firstCollapseBtn"]').trigger('click');
					}
				},
			},{
				title:'Second Button',	
				name:'secondCollapseBtn',
				content:'This is Second Collapse Button',
			},{
				title:'Hidden Element',	
				name:'hiddenButton', 
				content:'This is hidden button',
				before:function(){
					if($('#collapseExample').is(':hidden')){
						$('[data-name="firstCollapseBtn"]').trigger('click');
					}
				},
			}]
		});
		return false;
	});
})
</script> 
<p>
	<a class="btn btn-success collapseBtn" href="#">Start Tour</a>
</p>

<a data-name="firstCollapseBtn" class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  First Collapse Button
</a>

<button data-name="secondCollapseBtn" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Second Collapse Button
</button>

<div class="collapse" id="collapseExample">
  <div class="well">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. <a data-name="hiddenButton" href="btn btn-primary">Hidden button</a> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
  </div>
</div>	
	

Bootstrap Modal

Start Tour

Source

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/itour.css">
<script src="js/jquery.itour.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>	
	
<script>
$(window).on('load',function(){
	$('.modalBtn').on('click',function(){
		$('body').itour({
			showAbsentElement:true,
			tourTitle:'Bootstrap Modal',
			steps:[{
				title:'Step 1 Title',	
				name:'[data-target="#exampleModalCenter"]',
				content:'<p>This is Button trigger modal. It\'s now locked.</p><p>Click "Next" to continue.</p>',
				before:function(){
					$('#exampleModalCenter').modal('hide');
				},
				disable:true
			},{
				title:'Step 2 Title',	
				name:'.modal-content', 
				content:'<p>This is Modal Content. It\'s now locked too.</p><p>Click "Next" to continue.</p>',
				before:function(){
					$('#exampleModalCenter').modal('show');
				},
				delayBefore:300,
				disable:true
			},{
				title:'Step 3 Title',	
				name:'.modal-footer .btn-primary', 
				content:'<p>This is Modal Button.</p><p>Click It to continue.</p>',
				before:function(){
					$('#exampleModalCenter').modal('show');
				},
				delayBefore:300,
				disable:false,
				event:['click',$('.modal-footer .btn-primary')]
			},{
				title:'Step 4 Title',	
				contentPosition:'center',
				content:'<p>Thank you for viewing.</p>',
				before:function(){
					$('#exampleModalCenter').modal('hide');
				}
			}]
		});
		return false;
	});
});
</script> 
<p>
	<a class="btn btn-success modalBtn" href="#">Start Tour</a>
</p>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>