diff --git a/.gitignore b/.gitignore
index c558400..6573517 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,7 @@ log.txt
 .vscode/
 npm-debug.log*
 
+.sourcemaps
 .idea/
 .sass-cache/
 .tmp/
@@ -28,6 +29,7 @@ plugins/android.json
 plugins/ios.json
 www/
 $RECYCLE.BIN/
+typings/
 
 .DS_Store
 Thumbs.db
diff --git a/.gitmodules b/.gitmodules
index 089b786..adbd452 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,3 @@
 [submodule "src/ionic-tooltips"]
 	path = src/ionic-tooltips
-	url = git@github.com:zyra/ionic-tooltips
+	url = https://github.com/zyra/ionic-tooltips.git
diff --git a/ionic.config.json b/ionic.config.json
index a1b1714..241e707 100644
--- a/ionic.config.json
+++ b/ionic.config.json
@@ -1,5 +1,6 @@
 {
   "name": "ionic-tooltips-example",
   "app_id": "",
-  "type": "ionic-angular"
+  "type": "ionic-angular",
+  "integrations": {}
 }
diff --git a/package.json b/package.json
index 80beb06..e821853 100644
--- a/package.json
+++ b/package.json
@@ -21,19 +21,18 @@
     "@angular/http": "4.1.3",
     "@angular/platform-browser": "4.1.3",
     "@angular/platform-browser-dynamic": "4.1.3",
-    "@ionic-native/core": "3.12.1",
-    "@ionic-native/splash-screen": "3.12.1",
-    "@ionic-native/status-bar": "3.12.1",
+    "@ionic-native/core": "4.2.1",
+    "@ionic-native/splash-screen": "4.2.1",
+    "@ionic-native/status-bar": "4.2.1",
     "@ionic/storage": "2.0.1",
-    "ionic-angular": "3.5.0",
+    "ionic-angular": "3.6.1",
     "ionicons": "3.0.0",
     "rxjs": "5.4.0",
     "sw-toolbox": "3.6.0",
     "zone.js": "0.8.12"
   },
   "devDependencies": {
-    "@ionic/app-scripts": "1.3.12",
-    "@ionic/cli-plugin-ionic-angular": "1.3.1",
+    "@ionic/app-scripts": "2.1.4",
     "typescript": "2.3.4"
   },
   "description": "A demo app demonstrating ionic-tooltips module"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ab78376..f598d57 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,12 +3,12 @@ import { Platform } from 'ionic-angular';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
-import { HomePage } from '../pages/home/home';
+// import { HomePage } from '../pages/home/home';
 @Component({
   templateUrl: 'app.html'
 })
 export class MyApp {
-  rootPage:any = HomePage;
+  rootPage:any = 'home';
 
   constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
     platform.ready().then(() => {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 96888a4..c5e3005 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,24 +5,25 @@ import { SplashScreen } from '@ionic-native/splash-screen';
 import { StatusBar } from '@ionic-native/status-bar';
 
 import { MyApp } from './app.component';
-import { HomePage } from '../pages/home/home';
+// import { HomePage } from '../pages/home/home';
 
-import { TooltipsModule } from '../ionic-tooltips/src';
+// import { TooltipsModule } from '../ionic-tooltips/src';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
     MyApp,
-    HomePage
+    // HomePage
   ],
   imports: [
     BrowserModule,
     IonicModule.forRoot(MyApp),
-    TooltipsModule
+    BrowserAnimationsModule
   ],
   bootstrap: [IonicApp],
   entryComponents: [
     MyApp,
-    HomePage
+    // HomePage
   ],
   providers: [
     StatusBar,
diff --git a/src/index.html b/src/index.html
index 58c8942..0453704 100644
--- a/src/index.html
+++ b/src/index.html
@@ -34,6 +34,9 @@
   <!-- The polyfills js is generated during the build process -->
   <script src="build/polyfills.js"></script>
 
+  <!-- all code from node_modules directory is here -->
+  <script src="build/vendor.js"></script>
+  
   <!-- The bundle js is generated during the build process -->
   <script src="build/main.js"></script>
 
diff --git a/src/ionic-tooltips b/src/ionic-tooltips
index 067d0e8..6381ba1 160000
--- a/src/ionic-tooltips
+++ b/src/ionic-tooltips
@@ -1 +1 @@
-Subproject commit 067d0e8bd99ec031aaed4044e587e91b52a67959
+Subproject commit 6381ba13dcecd8bf0dcf9dcff712cd7daaa7e674
diff --git a/src/pages/home/home.html b/src/pages/home/home.html
index 0c58070..eff8623 100644
--- a/src/pages/home/home.html
+++ b/src/pages/home/home.html
@@ -12,46 +12,62 @@
 </ion-header>
 
 <ion-content>
+  <ion-list>
+    <ion-item-divider color="light">Settings</ion-item-divider>
+    <ion-item>
+      <ion-label>Show arrow</ion-label>
+      <ion-toggle mode="ios" [(ngModel)]="showArrow"></ion-toggle>
+    </ion-item><ion-item>
+        <ion-label>Set all active</ion-label>
+        <ion-toggle mode="ios" [(ngModel)]="active"></ion-toggle>
+      </ion-item>
+    <ion-item>
+      Show tooltip on
+      <p padding-top>
+        <ion-segment mode="ios" [(ngModel)]="tooltipEvent">
+          <ion-segment-button value="click">Click</ion-segment-button>
+          <ion-segment-button value="press">Press</ion-segment-button>
+          <ion-segment-button value="hover">Hover</ion-segment-button>
+        </ion-segment>
+      </p>
+    </ion-item>
+    <ion-item-group>
+      <ion-item>
+        <ion-label>
+          Duration
+        </ion-label>
+        <ion-note color="primary" item-right>
+          {{ duration + 'ms' }}
+        </ion-note>
+      </ion-item>
+      <ion-item>
+        <ion-range [(ngModel)]="duration" [min]="1000" [max]="10000" [step]="1000" [pin]="true" [snaps]="true"></ion-range>
+      </ion-item>
+    </ion-item-group>
+    <ion-item>
+      <ion-label>Tooltip Text</ion-label>
+      <ion-input type="text" [(ngModel)]="tooltipText"></ion-input>
+    </ion-item>
+  </ion-list>
 
-  <ion-item>
-    <ion-label>Show arrow</ion-label>
-    <ion-toggle mode="ios" [(ngModel)]="showArrow"></ion-toggle>
-  </ion-item>
-  <ion-item>
-    Show tooltip on
-    <p padding-top>
-      <ion-segment mode="ios" [(ngModel)]="tooltipEvent">
-        <ion-segment-button value="click">Click</ion-segment-button>
-        <ion-segment-button value="press">Press</ion-segment-button>
-      </ion-segment>
-    </p>
-  </ion-item>
-  <ion-item-divider color="light">
-    Duration
-    <ion-note color="primary" item-right>
-      {{ duration + 'ms' }}
-    </ion-note>
-  </ion-item-divider>
-  <ion-item>
-    <ion-range [(ngModel)]="duration" [min]="1000" [max]="10000" [step]="1000" [pin]="true" [snaps]="true"></ion-range>
-  </ion-item>
 
+  <ion-item-divider color="light">Demo Buttons</ion-item-divider>
   <div padding>
-    <button margin-top ion-button mode="ios" block tooltip="I'm a beautiful tooltip" positionV="top" [arrow]="showArrow" [event]="tooltipEvent" [duration]="duration">
+    <button margin-top ion-button mode="ios" block [active]="active" [tooltip]="tooltipText" positionV="top" [arrow]="showArrow" [event]="tooltipEvent" [duration]="duration">
       Top tooltip
     </button>
 
     <p text-right>
-      <button ion-button mode="ios" tooltip="I'm a beautiful tooltip" positionH="left" [arrow]="showArrow" [event]="tooltipEvent" [duration]="duration">
+      <button ion-button mode="ios" [active]="active" [tooltip]="tooltipText" positionH="left" [arrow]="showArrow" [event]="tooltipEvent" [duration]="duration">
         Left tooltip
       </button>
     </p>
 
-    <button ion-button mode="ios" tooltip="I'm a beautiful tooltip" positionH="right" [arrow]="showArrow" [event]="tooltipEvent" [duration]="duration">
+    <button ion-button mode="ios" [active]="active" [tooltip]="tooltipText" positionH="right" [arrow]="showArrow" [event]="tooltipEvent" [duration]="duration">
       Right tooltip
     </button>
 
-    <button ion-button mode="ios" block tooltip="I'm a beautiful tooltip" positionV="bottom" [arrow]="showArrow" [event]="tooltipEvent" [duration]="duration">
+    <button ion-button mode="ios" [active]="active" block [tooltip]="tooltipText" positionV="bottom" [arrow]="showArrow" [event]="tooltipEvent" [duration]="duration">
       Bottom tooltip
     </button>
   </div>
diff --git a/src/pages/home/home.module.ts b/src/pages/home/home.module.ts
new file mode 100644
index 0000000..192dc86
--- /dev/null
+++ b/src/pages/home/home.module.ts
@@ -0,0 +1,20 @@
+import { TooltipsModule } from './../../ionic-tooltips/src';
+import { CommonModule } from '@angular/common';
+import { HomePage } from './home';
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+
+@NgModule({
+  declarations: [
+    HomePage,
+  ],
+  imports: [
+    CommonModule,
+    IonicPageModule.forChild(HomePage),
+    TooltipsModule
+  ],
+  exports: [
+    HomePage
+  ]
+})
+export class HomePageModule {}
\ No newline at end of file
diff --git a/src/pages/home/home.scss b/src/pages/home/home.scss
index d4cc8fc..ef70c2b 100644
--- a/src/pages/home/home.scss
+++ b/src/pages/home/home.scss
@@ -1,3 +1,5 @@
 page-home {
-
+    .scroll-content {
+        padding-bottom: 30px;
+    }
 }
diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts
index 25645dc..25f5b1a 100644
--- a/src/pages/home/home.ts
+++ b/src/pages/home/home.ts
@@ -1,5 +1,9 @@
 import { Component } from '@angular/core';
+import { IonicPage } from 'ionic-angular';
 
+@IonicPage({
+  name: 'home'
+})
 @Component({
   selector: 'page-home',
   templateUrl: 'home.html'
@@ -9,5 +13,7 @@ export class HomePage {
   tooltipEvent: 'click' | 'press' = 'click';
   showArrow: boolean = true;
   duration: number = 3000;
+  active: boolean = false;
+  tooltipText: string = "I'm a beautiful tooltip";
 
 }
diff --git a/tsconfig.json b/tsconfig.json
index 2e450f9..f9695c9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,7 +17,8 @@
     "src/**/*.ts"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "src/**/*.spec.ts"
   ],
   "compileOnSave": false,
   "atom": {