Usage example

<div> <span id="tip1">Highlighted</span> <span id="tip2">Elements</span> <input id="input1" /> <span id="full1">Full options</span> </div> <!-- at the bottom of the page --> <tour step="currentStep"> <virtual-step tourtip="tip 1" tourtip-element="#tip1"></virtual-step> <virtual-step tourtip="tip 2" tourtip-element="#tip2"></virtual-step> <virtual-step tourtip="You can use it as an attribute on your element" tourtip-element="#input1"></virtual-step> <virtual-step tourtip="Full options" tourtip-step="2" tourtip-next-label="Next" tourtip-placement="right" tourtip-container-element="body" tourtip-margin="0" tourtip-offset-vertical="0" tourtip-offset-horizontal="0" on-show="someFunc" on-proceed="someFunc" use-source-scope="false" tourtip-element="#full1"></virtual-step> </tour>

<tour step="currentStep"> <span tourtip="tip 1"> Highlighted </span> <span tourtip="tip 2"> Elements </span> <input tourtip="You can use it as an attribute on your element" /> <span tourtip="Full options" tourtip-step="2" tourtip-next-label="Next" tourtip-placement="right" tourtip-container-element="body" tourtip-margin="0" tourtip-offset-vertical="0" tourtip-offset-horizontal="0" on-show="someFunc" on-proceed="someFunc">Full options</span> </tour>

<tour>

<tour step="currentStep" post-tour="tourComplete()" post-step="stepComplete()">

var curStep = $cookies.get('myTour'); if(typeof curStep === 'string') curStep = parseInt(curStep); $scope.currentStep = curStep || 0; $scope.postStepCallback = function() { $cookies.put('myTour', $scope.currentStep); };

<tour>

<a ng-click="openTour()">Open Tour</a> <a ng-click="closeTour()">Close Tour</a>

You can also add callbacks to theIt is very easy to add a cookie module that remembers what step a user was on. With the angular-cookie module, this is all you need to integrate cookies:Inside youryou have access to two scope methods for ending and starting the tour.