diff --git a/app/app.component.ts b/app/app.component.ts
index 32ddb48..003628b 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -14,7 +14,7 @@ import {Component, Type} from '@angular/core';
`,
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
index 59c6d11..7b95dca 100644
--- a/app/index.html
+++ b/app/index.html
@@ -2,7 +2,6 @@
Angular2 Npm Package Example
-
diff --git a/app/ng2-tooltip.css b/app/ng2-tooltip.css
deleted file mode 100644
index cf3a673..0000000
--- a/app/ng2-tooltip.css
+++ /dev/null
@@ -1,19 +0,0 @@
-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);
-}
diff --git a/package.json b/package.json
index b1ca3fc..0566dfd 100644
--- 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
index 01b42d6..cfec940 100644
--- 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
new file mode 100644
index 0000000..a64dcd4
--- /dev/null
+++ 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: '',
+ 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 = `
+ ${tooltip}
+
+ `;
+ 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
deleted file mode 100644
index f7b91b9..0000000
--- a/src/ng2-tooltip-directive.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Directive, ViewContainerRef, Input } from '@angular/core';
-
-import {Ng2OverlayManager, Ng2Overlay} from 'ng2-overlay';
-
-@Directive({
- selector: '[ng2-tooltip]',
- host: {
- '(mouseover)': 'showTooltip($event)',
- '(mouseout)': 'hideTooltip($event)'
- }
-})
-export class Ng2TooltipDirective {
-
- @Input('ng2-tooltip') tooltip: string;
-
- el: HTMLElement;
- overlay: Ng2Overlay;
-
- constructor(
- public viewContainerRef: ViewContainerRef,
- public overlayManager: Ng2OverlayManager
- ) {
- this.el = this.viewContainerRef.element.nativeElement;
- }
-
- ngAfterViewInit(): void {
- this.overlay = this.getTooltipOverlay(this.el, this.tooltip);
- }
-
- showTooltip($event) {
- this.overlayManager.open(this.overlay, $event);
- $event.stopPropagation();
- }
-
- hideTooltip($event) {
- this.overlayManager.close(this.overlay);
- $event.stopPropagation();
- }
-
- getTooltipOverlay(el, tooltip) {
- let tooltipEl = document.createElement('ng2-tooltip');
- tooltipEl.style.display = 'none';
- let divEl = document.createElement('div');
- divEl.innerHTML = `
- ${tooltip}
-
- `;
- tooltipEl.appendChild(divEl);
-
- //el.parentElement.insertBefore(tooltipEl, el.nextSibling);
- el.appendChild(tooltipEl);
-
- let overlay = new Ng2Overlay(tooltipEl, {
- id: 'tooltip-' + (el.id || Math.floor(Math.random()*1000000)),
- position: 'top cursor outside'
- });
- this.overlayManager.register(overlay);
- return overlay;
- }
-}
diff --git a/src/ng2-tooltip-overlay.module.ts b/src/ng2-tooltip-overlay.module.ts
index 353e222..ac34ff2 100644
--- 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 {}