var app = angular.module("myApp", ["ngTutorial"]);
<any tutorial="myTutorialActivator" tutorial-steps="2">
<!-- YOUR CONTENT -->
<any tutorial-highlight="1">
<!-- OTHER CONTENT -->
</any>
<any tutorial-highlight="2">
<!-- OTHER CONTENT AGAIN -->
</any>
</any>
(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!