A powerful responsive tutorial module


ngTutorial is the easiest way to create a simple and responsive tutorial in your page.
  1. Import JS and CSS in your page
  2. Inject ngTutorial in your app:
    var app = angular.module("myApp", ["ngTutorial"]);
  3. Put the "tutorial" attribute on the container and "tutorial-highlight" on elements you want to render over the dark overlay:
                                <any tutorial="myTutorialActivator" tutorial-steps="2">
                                <!-- YOUR CONTENT -->
                                <any tutorial-highlight="1">
                                <!-- OTHER CONTENT -->
                                <any tutorial-highlight="2">
                                <!-- OTHER CONTENT AGAIN -->
Note: "myTutorialActivator" is intended as $scope.myTutorialActivator in your controller and it should be a Boolean variable


(Put this options as attributes on the element with the "tutorial" attribute)

Option Description Type Default value
tutorial-prevent-click If "true", an extra overlay will prevent user to interact with highlighted elements (Since highlighted elements are real elements of your page) String false
tutorial-show-close If "true" a close button will be rendered to terminate the tutorial.
If empty any click will close the tutorial.
String false
tutorial-steps If you want steps in your tutorial put this attribute on the tutorial container, and fill it with the total step you want to show. String null
tutorial-highlight If you used the "tutorial-steps" feature, you must valorize this attribute (on the elements you want to highlight) with the step you want elements to be highlighted. Take a look to the "usage" section to better understand this. String null


Click the "START" button to see "ngTutorial" in action!


This is the Tutorial container

Is angular loaded? {{angularLoaded || 'No, dude!'}}

Yes, you can use bootstrap and columns

ngTutorial will always respect your layout

This "highlight" is inside a column

Yes it's not a problem if the layer background is transparent

ngTutorial will check and fix view issues!

This "highlight" is on a column

What else?

And also is not a problem if it's not!


ngTutorial is a widget to easily add a tutorial page in your website!