issue #4, #5 refactoring by including ng2-overlay as a cdpendency and…

… changed directive to component
ng2-ui · Feb 27, 2017 · 0b6be11 · 0b6be11
1 parent 71c4b02
commit 0b6be11
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 90 deletions.
diff --git a/app/app.component.ts b/app/app.component.ts
@@ -14,7 +14,7 @@ import {Component, Type} from '@angular/core';
     </div>
     `,
   styles: [`
-    *[ng2-tooltip] {margin: 40px; border: 1px solid #ccc }
+    div {margin: 40px; border: 1px solid #ccc }
  `],
 })
 export class AppComponent {

diff --git a/app/index.html b/app/index.html
@@ -2,7 +2,6 @@
 <html>
 <head>
   <title>Angular2 Npm Package Example</title>
-  <link rel="stylesheet" href="ng2-tooltip.css" />
 </head>
 
 <body>

diff --git a/app/ng2-tooltip.css b/app/ng2-tooltip.css
diff --git a/package.json b/package.json
@@ -25,7 +25,9 @@
     "url": "https://github.com/ng2-ui/ng2-tooltip-overlay/issues"
   },
   "homepage": "https://github.com/ng2-ui/ng2-tooltip-overlay#readme",
-  "dependencies": {},
+  "dependencies": {
+    "ng2-overlay": "^0.7.2"
+  },
   "devDependencies": {
     "@angular/common": "^2.3.0",
     "@angular/compiler": "^2.3.0",
@@ -40,7 +42,6 @@
     "angular2-template-loader": "^0.6.0",
     "codelyzer": "^2.0.0-beta.3",
     "core-js": "^2.4.1",
-    "ng2-overlay": "^0.7.0",
     "npm-check-updates": "^2.8.8",
     "npm-run-all": "^3.1.2",
     "raw-loader": "^0.5.1",

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,4 @@
-import {Ng2TooltipDirective} from "./ng2-tooltip-directive";
+import {Ng2TooltipComponent} from "./ng2-tooltip-component";
 import {Ng2TooltipOverlayModule} from './ng2-tooltip-overlay.module';
 
-export { Ng2TooltipDirective, Ng2TooltipOverlayModule };
-
+export { Ng2TooltipComponent, Ng2TooltipOverlayModule };
diff --git a/src/ng2-tooltip-component.ts b/src/ng2-tooltip-component.ts
@@ -0,0 +1,88 @@
+import { 
+  Component,
+  ViewContainerRef,
+  Input,
+  ViewEncapsulation
+} from '@angular/core';
+
+import {Ng2OverlayManager, Ng2Overlay} from 'ng2-overlay';
+
+@Component({
+  selector: '[ng2-tooltip]',
+  template: '<ng-content></ng-content>',
+  host: {
+    '(mouseover)': 'showTooltip($event)',
+    '(mouseout)':  'hideTooltip($event)'
+  },
+  styles: [`
+    ng2-tooltip .tooltip-contents {
+      border: 1px solid #ccc; padding: 5px
+    }
+    ng2-tooltip .tooltip-down-arrow {
+      height: 10px;
+    }
+    ng2-tooltip .tooltip-down-arrow:before {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      left: 45%;
+      bottom: 5px;
+      background: #FFFFFF;
+      border-left:1px solid #ccc;
+      border-bottom:1px solid #ccc;
+      transform:rotate(-45deg);
+    }
+  `],
+  encapsulation: ViewEncapsulation.None
+})
+export class Ng2TooltipComponent {
+
+  @Input('ng2-tooltip') tooltip: string;
+
+  el: HTMLElement;
+  ng2Overlay: Ng2Overlay;
+
+  constructor(
+    public viewContainerRef: ViewContainerRef,
+    public ng2OverlayManager: Ng2OverlayManager
+  ) {
+    this.el = this.viewContainerRef.element.nativeElement;
+  }
+
+  ngAfterViewInit(): void {
+    this.ng2Overlay = this.getTooltipOverlay(this.el, this.tooltip);
+  }
+
+  showTooltip($event) {
+    this.ng2OverlayManager.open(this.ng2Overlay, $event);
+    $event.stopPropagation();
+  }
+
+  hideTooltip($event) {
+    this.ng2OverlayManager.close(this.ng2Overlay);
+    $event.stopPropagation();
+  }
+
+  getTooltipOverlay(el, tooltip) {
+    let tooltipEl = document.createElement('ng2-tooltip');
+    tooltipEl.style.display = 'none';
+    let divEl = document.createElement('div');
+    divEl.innerHTML = `
+       <div class='tooltip-contents'>${tooltip}</div>
+       <div class='tooltip-down-arrow'></div>
+    `;
+    tooltipEl.appendChild(divEl);
+
+    //el.parentElement.insertBefore(tooltipEl, el.nextSibling);
+    el.appendChild(tooltipEl);
+
+    let ng2Overlay = new Ng2Overlay(tooltipEl, {
+      id: 'tooltip-' + (el.id || Math.floor(Math.random()*1000000)),
+      position: 'top cursor outside'
+    });
+    this.ng2OverlayManager.register(ng2Overlay);
+    return ng2Overlay;
+  }
+}
diff --git a/src/ng2-tooltip-directive.ts b/src/ng2-tooltip-directive.ts
diff --git a/src/ng2-tooltip-overlay.module.ts b/src/ng2-tooltip-overlay.module.ts
@@ -3,11 +3,11 @@ import { FormsModule } from "@angular/forms";
 import { CommonModule  } from '@angular/common';
 import { Ng2OverlayModule } from 'ng2-overlay';
 
-import {Ng2TooltipDirective} from "./ng2-tooltip-directive";
+import {Ng2TooltipComponent} from "./ng2-tooltip-component";
 
 @NgModule({
-  imports: [ CommonModule, FormsModule, Ng2OverlayModule ],
-  declarations: [Ng2TooltipDirective],
-  exports: [ Ng2TooltipDirective ]
+  imports: [CommonModule, FormsModule, Ng2OverlayModule],
+  declarations: [Ng2TooltipComponent],
+  exports: [Ng2TooltipComponent]
 })
 export class Ng2TooltipOverlayModule {}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,6 @@ @@
     <html>
     <head>
       <title>Angular2 Npm Package Example</title>
-      <link rel="stylesheet" href="ng2-tooltip.css" />
     </head>
     <body>
@@ Expand Down @@