You can inject the tourConfig service into your app and modify the defaults.

HTML templates are cleanly separated, and you can easily substitute your own template.

A default CSS can be used for your convenience, but feel free to use your own css!

<tour step="currentStep">
  <span tourtip="tip 1"> Highlighted </span>
  <span class="important-span"> Important </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="3"
        tourtip-next-label="Next"
        tourtip-placement="right"
        on-show="onShowMethod()"
        on-proceed="proceedMethod()"
        tourtip-margin="60">Full options</span>

  <virtual-step tourtip="Well, some important stuff"
                tourtip-step="4"
                tourtip-element=".important-span" />

</tour>

You can also add callbacks to the <tour>:

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

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

bower install angular-tour

<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>

<link href="bower_components/angular-tour/dist/angular-tour.css" rel="stylesheet"/>

angular.module('myApp', ['angular-tour']);