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!

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

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

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 rel="bower_components/angular-tour/dist/angular-tour.css"/>

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