Fork me on GitHub
Features
  • Easy to use
  • Responsive to window resizes
  • Supports multiple tours
  • Smoothly scrolls to each step
  • Control the placement for each tour tip
Supported Browsers
  • Chrome
  • Firefox
  • Safari
  • Internet Explorer 10+
Customizable
Configuring Defaults
You can inject the tourConfig service into your app and modify the defaults.
Customizing HTML
HTML templates are cleanly separated, and you can easily substitute your own template.
Customizing CSS
A default CSS can be used for your convenience, but feel free to use your own css!
Example
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>
Alternative possible notation See old docs
<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>
You can also add callbacks to the <tour>:
<tour step="currentStep" post-tour="tourComplete()" post-step="stepComplete()">
It 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:
var curStep = $cookies.get('myTour');
if(typeof curStep === 'string')
  curStep = parseInt(curStep);

$scope.currentStep = curStep || 0;

$scope.postStepCallback = function() {
  $cookies.put('myTour', $scope.currentStep);
};
Inside your <tour> you have access to two scope methods for ending and starting the tour.
<a ng-click="openTour()">Open Tour</a>
<a ng-click="closeTour()">Close Tour</a>
Open Tour Close Tour
How to install
Install with bower using
bower install angular-tour
Add the dependencies to your html file
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-tour/dist/angular-tour-tpls.min.js"></script>
You'll also probably want to add the default stylesheet.
<link rel="bower_components/angular-tour/dist/angular-tour.css"/>
Lastly, add angular-tour as a dependency to your angular module
angular.module('myApp', ['angular-tour']);