[ADF-402] Diagram tooltips bug (#2043)

* Getting rid of MDL from dialog tooltips

* Tooltip message body fix and stylings

* Add adf prefix and sass compilation

* build fix

ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts

@@ -15,24 +15,120 @@
  * limitations under the License.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, ElementRef, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
+const POSITION = { BOTTOM: 'bottom', LEFT: 'left', RIGHT: 'right', TOP: 'top'};
+const IS_ACTIVE_CLASS = 'is-active';
 
 @Component({
     selector: 'diagram-tooltip',
     templateUrl: './diagram-tooltip.component.html',
-    styleUrls: ['./diagram-tooltip-style.css']
+    styleUrls: ['./diagram-tooltip.component.scss']
 })
-export class DiagramTooltip {
+export class DiagramTooltip implements AfterViewInit, OnDestroy {
+
+    private tooltipElement: any;
+    private targetElement: any;
+    private boundMouseEnterHandler: EventListenerObject;
+    private boundMouseLeaveAndScrollHandler: EventListenerObject;
+    public adf: string = 'adf';
+
+    @ViewChild('tooltipContent') tooltipContent: ElementRef;
 
     @Input()
     data: any;
 
-    getTooltipHeader(data: any) {
-        let headerValue = data.name || data.id;
-        return data.type + ' ' + headerValue;
+    @Input()
+    position: string = 'bottom';
+
+    /**
+     * Set up event listeners for the target element (defined in the data.id)
+     */
+    public ngAfterViewInit() {
+        this.tooltipElement = this.tooltipContent.nativeElement;
+
+        if (this.data.id) {
+            this.targetElement = document.getElementById(this.data.id);
+        }
+
+        if (this.targetElement) {
+            if (!this.targetElement.hasAttribute('tabindex')) {
+                this.targetElement.setAttribute('tabindex', '0');
+            }
+
+            this.boundMouseEnterHandler = this.handleMouseEnter.bind(this);
+            this.boundMouseLeaveAndScrollHandler = this.hideTooltip.bind(this);
+            this.targetElement.addEventListener('mouseenter', this.boundMouseEnterHandler, false);
+            this.targetElement.addEventListener('touchend', this.boundMouseEnterHandler, false);
+            this.targetElement.addEventListener('mouseleave', this.boundMouseLeaveAndScrollHandler, false);
+            window.addEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
+            window.addEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
+        }
     }
 
-    getTooltipMessage(data: any) {
-        return (data.value !== undefined && data.value !== null ) ? data.value + ' ' + data.dataType : '';
+    /**
+     * Clear all bound eventlisteners
+     */
+    ngOnDestroy() {
+        window.removeEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
+        window.removeEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
+    }
+
+    /**
+     * Hides the tooltip
+     */
+    private hideTooltip(): void {
+        this.tooltipElement.classList.remove(IS_ACTIVE_CLASS);
+    }
+
+    /**
+     * Shows the tooltip
+     */
+    private showTooltip(): void {
+        this.tooltipElement.classList.add(IS_ACTIVE_CLASS);
+    }
+
+    /**
+     * Calculates the tooltip's position and displays it
+     *
+     * @param event mouseenter/touchend event
+     */
+    private handleMouseEnter(event): void {
+        const props = event.target.getBoundingClientRect(),
+            top = props.top + (props.height / 2),
+            marginLeft = -1 * (this.tooltipElement.offsetWidth / 2),
+            marginTop = -1 * (this.tooltipElement.offsetHeight / 2);
+
+        let left = props.left + (props.width / 2);
+
+        if (this.position === POSITION.LEFT || this.position === POSITION.RIGHT) {
+            left = (props.width / 2);
+            if (top + marginTop < 0) {
+                this.tooltipElement.style.top = '0';
+                this.tooltipElement.style.marginTop = '0';
+            } else {
+                this.tooltipElement.style.top = top + 'px';
+                this.tooltipElement.style.marginTop = marginTop + 'px';
+            }
+        } else {
+            if (left + marginLeft < 0) {
+                this.tooltipElement.style.left = '0';
+                this.tooltipElement.style.marginLeft = '0';
+            } else {
+                this.tooltipElement.style.left = left + 'px';
+                this.tooltipElement.style.marginLeft = marginLeft + 'px';
+            }
+        }
+
+        if (this.position === POSITION.TOP) {
+            this.tooltipElement.style.top = props.top - this.tooltipElement.offsetHeight - 10 + 'px';
+        } else if (this.position === POSITION.RIGHT) {
+            this.tooltipElement.style.left = props.left + props.width + 10 + 'px';
+        } else if (this.position === POSITION.LEFT) {
+            this.tooltipElement.style.left = props.left - this.tooltipElement.offsetWidth - 10 + 'px';
+        } else {
+            this.tooltipElement.style.top = props.top + props.height + 10 + 'px';
+        }
+
+        this.showTooltip();
     }
 }