Fork me on GitHub
  • 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+
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!
Usage example
<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-offset="60">Full options</span>
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:
$scope.currentStep = ipCookie('myTour') || 0;

$scope.postStepCallback = function() {
  ipCookie('myTour', $scope.currentStep, { expires: 3000 });
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']);