Angular Intro Plus.js

Setup

Include the JS and CSS files for intro.js, and angular-intro-plus.min.js. Add the module angular-intro-plus to your app declaration.

Options

Set the options like so: ng-intro-plus-options="IntroPlusOptions". Define $scope.IntroPlusOptions in your controller. The format is only same the steps of original.

Method name

Pick a method name, ng-intro-plus-show="CallMe". You can invoke the intro from elsewhere by calling CallMe();.
To autostart, use ng-intro-plus-autostart="true".
To hide all of them or just help icons, use ng-intro-plus-hide="hideMe", ng-intro-plus-hide-help-box="hideHelpBox".

Callbacks

You can get callbacks to your controller using the ng-intro-plus-on-complete, ng-intro-plus-on-exit, ng-intro-plus-on-change, ng-intro-plus-on-before-change, ng-intro-plus-on-after-change ng-intro-plus-on-before-overlay-creation, ng-intro-plus-on-after-overlay-creation, and ng-intro-plus-on-before-overlay-removal, ng-intro-plus-on-after-overlay-removal directives.

See index.html and app.js for usage code.

Demo about repositioning help icons

Try to click below button after clicking 'Demo' button above.

Here is hidden text.
Here is hidden text.
Here is hidden text.
Here is hidden text.
Here is hidden text.
Here is hidden text.

Example

Set the options and method name:

<div ng-controller="MyController"
ng-intro-plus-options="IntroPlusOptions"
ng-intro-plus-show="CallMe" ...

Options in the controller

$scope.IntroPlusOptions = {
steps:[
{
element: '#step1',
intro: "First tooltip"
},
{
element: '#step4',
intro: "Second tooltip",
position: 'right'
},
...

Call it either way

<button ng-click="CallMe();">Go</button>

$scope.CallMe();

Hide intro

<button ng-click="hideMe();">Go</button>

$scope.hideMe();

hide intro

Hide help box

<button ng-click="hideHelpBox();">Go</button>

$scope.hideHelpBox();

hide help box only