1 files changed, 109 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts
new file mode 100644
index 0000000000..79d35c6e0e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts
@@ -0,0 +1,109 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {
+    Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener
+} from "@angular/core";
+import {TooltipContentComponent} from "./tooltip-content.component";
+
+@Directive ({
+    selector: "[tooltip]"
+})
+export class TooltipComponent {
+
+    // -------------------------------------------------------------------------
+    // Properties
+    // -------------------------------------------------------------------------
+
+    private tooltip: ComponentRef<TooltipContentComponent>;
+    private visible: boolean;
+    private delayInProgress: boolean = false;
+
+    // -------------------------------------------------------------------------
+    // Constructor
+    // -------------------------------------------------------------------------
+
+    constructor(private viewContainerRef: ViewContainerRef,
+                private resolver: ComponentFactoryResolver) {
+    }
+
+    // -------------------------------------------------------------------------
+    // Inputs / Outputs
+    // -------------------------------------------------------------------------
+
+    @Input("tooltip") content: string|TooltipContentComponent;
+    @Input() tooltipDisabled: boolean;
+    @Input() tooltipAnimation: boolean = true;
+    @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom";
+    @Input() tooltipDelay: number = 1500;
+
+    // -------------------------------------------------------------------------
+    // Public Methods
+    // -------------------------------------------------------------------------
+
+    @HostListener("mouseenter")
+    show(): void {
+        if(this.tooltipDisabled || this.visible || this.content === "") {
+            return;
+        }
+        if (this.tooltipDelay && !this.delayInProgress) {
+            this.delayInProgress = true;
+            setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay);
+            return;
+        }
+
+        this.visible = true;
+        if (typeof this.content === "string") {
+            const factory = this.resolver.resolveComponentFactory(TooltipContentComponent);
+            if (!this.visible) {
+                return;
+            }
+
+            this.tooltip = this.viewContainerRef.createComponent(factory);
+            this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement;
+            this.tooltip.instance.content = this.content as string;
+            this.tooltip.instance.placement = this.tooltipPlacement;
+            this.tooltip.instance.animation = this.tooltipAnimation;
+        } else {
+            const tooltip = this.content as TooltipContentComponent;
+            tooltip.hostElement = this.viewContainerRef.element.nativeElement;
+            tooltip.placement = this.tooltipPlacement;
+            tooltip.animation = this.tooltipAnimation;
+            tooltip.show();
+        }
+    }
+
+    @HostListener("mouseleave")
+    hide(): void {
+        this.delayInProgress = false;
+        if (!this.visible) {
+            return;
+        }
+
+        this.visible = false;
+        if (this.tooltip) {
+            this.tooltip.destroy();
+        }
+        if (this.content instanceof TooltipContentComponent) {
+            (this.content as TooltipContentComponent).hide();
+        }
+    }
+}
+