An AngularJS directive for easily creating website walkthroughs
Install via bower:
bower install angular-walkthrough
Add dependencies:
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="bower_components/angular-walkthrough/dist/angular-walkthrough.min.css"></link>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular-walkthrough/dist/angular-walkthrough-tpls.min.js"></script>
Don't forget to add angular-walkthrough as a dependency to your angular module
angular.module('myApp', ['angular-walkthrough']);
<body walkthrough wt-start="startWalkthrough">
<div wt-step="1" wt-group="demo">
<wt-step-content>
Hello World!
</wt-step-content>
</div>
</body>
$scope.startWalkthrough("demo");
Add the "walkthrough" directive to parent element containing all steps, this is usually the <body> element. This is where the backdrop will be placed.
Additionally, functions are exposed to programmatically perform actions such as starting/stopping the walkthrough, moving to the next/previous step, as well as checking to see if a walkthrough step is currently active. You can expose these functions onto your scope by the wtStart, wtCancel, wtNext, wtPrev, and wtActive attributes. wtCancel returns a promise which resolves when the tour is cancelled.
If you need to run some code right before the user clicks "Next" or "Finish" on a step, provide a callback function to the wtOnNext attribute.
If you need to change the text of the button on the step (defaults to "Next" or "Finish"), wtBtnText is available.
To create a step, simply add the wtStep directive to any target element specifying the step number as the value. To have multiple walkthroughs, name your walkthrough using the wtGroup directive. You can start a specific walkthrough by passing the name to the start function. To specify HTML content to go inside the popover, add the wtStepContent directive as a child of wtStep and add the content in there. If you don't want to mess with that, you can also specify text content by using the wtText directive like so:
<body walkthrough wt-start="startWalkthrough">
<div wt-step="1" wt-group="demo" wt-text="Hello World!"></div>
</body>
To control the popover position, use wtPosition, supported values are: left, top, right, bottom.
Sometimes, you may want to have a user interact with the target element before moving to the next step. This is supported by adding the wtInteract directive to the element which has the wtStep directive. This will enable interaction with the target element, otherwise, the target element will have a cover layer preventing user interaction. In interact mode, the next or finish button will be disabled, you'll need to explicitly move to the next step once the user interaction is complete.
By using the wtStepContent directive, you define the HTML for the step's content.
You can also define your own template to use for the toolbar which displays the step number and next/finish buttons. To do this, use the non-templated version of the code and define your own template with the name "wt-popover-toolbar.html" in the $templateCache. You may also define your own CSS file.