fix(tooltip): fix tooltip position when element its wrapped by a abso…

…lute position div.
TemainfoSoftware · Jun 7, 2018 · 0e8c79d · 0e8c79d
1 parent 91b4c57
commit 0e8c79d
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 40 deletions.
diff --git a/projects/truly-ui/src/components/tooltip/directives/tooltip.directive.ts b/projects/truly-ui/src/components/tooltip/directives/tooltip.directive.ts
@@ -1,41 +1,51 @@
 import {
-    ComponentFactoryResolver,
-    Directive, HostListener, Input,
-    ViewContainerRef
+  ComponentFactoryResolver,
+  Directive, HostListener, Input, OnDestroy,
+  ViewContainerRef
 } from '@angular/core';
 import { TlToolTip } from '../tooltip';
 import { TooltipOptions } from '../tooltipOptions';
 
 @Directive( {
-    selector: '[tooltip]'
+  selector: '[tooltip]'
 } )
-export class TooltipDirective {
+export class TooltipDirective implements OnDestroy {
 
-    @Input() tooltip: TooltipOptions;
+  @Input() tooltip: TooltipOptions;
 
-    constructor( private view: ViewContainerRef, private compiler: ComponentFactoryResolver ) {
-    }
+  private listenerWheel;
 
-    @HostListener( 'mouseenter' )
-    onMouseEnter() {
-        this.show();
-    }
+  constructor( private view: ViewContainerRef, private compiler: ComponentFactoryResolver ) {
+    this.listenerWheel = document.addEventListener('mousewheel', () => {
+      this.hide();
+    });
+  }
 
-    @HostListener( 'mouseleave' )
-    onMouseLeave() {
-        this.hide();
-    }
+  @HostListener( 'mouseenter' )
+  onMouseEnter() {
+    this.show();
+  }
 
-    show() {
-      if (this.tooltip.text !== '') {
-        const componentFactory = this.compiler.resolveComponentFactory( TlToolTip );
-        const componentRef = this.view.createComponent( componentFactory );
-        (<TlToolTip>componentRef.instance).setOptions( this.tooltip );
-        (<TlToolTip>componentRef.instance).setPosition( this.view.element );
-      }
-    }
+  @HostListener( 'mouseleave' )
+  onMouseLeave() {
+    this.hide();
+  }
 
-    hide() {
-        this.view.clear();
+  show() {
+    if ( this.tooltip.text !== '' ) {
+      const componentFactory = this.compiler.resolveComponentFactory( TlToolTip );
+      const componentRef = this.view.createComponent( componentFactory );
+      (<TlToolTip>componentRef.instance).setOptions( this.tooltip );
+      (<TlToolTip>componentRef.instance).setPosition( this.view.element );
     }
+  }
+
+  hide() {
+    this.view.clear();
+  }
+
+  ngOnDestroy() {
+    document.removeEventListener('mousewheel', this.listenerWheel, false);
+  }
+
 }
diff --git a/projects/truly-ui/src/components/tooltip/tooltip.scss b/projects/truly-ui/src/components/tooltip/tooltip.scss
@@ -18,9 +18,9 @@
 }
 
 .tooltip-text {
+  position: fixed;
   padding: 5px;
   color: #FFF;
-  position: absolute;
   display: inline-block;
   z-index: 10000;
   border-radius: 3px;

diff --git a/projects/truly-ui/src/components/tooltip/tooltip.ts b/projects/truly-ui/src/components/tooltip/tooltip.ts
@@ -156,44 +156,42 @@ export class TlToolTip implements TooltipOptions {
     }
 
     private getTopMeasureForTopTooltip() {
-        this.isLessOrEqualThanNormalWidth() ? this.tooltip.nativeElement.style.top =
-            this.getElementTop() - this.elementHeight - this.tooltipPadding + 'px' :
-            this.tooltip.nativeElement.style.top = this.getElementTop() -
+        this.tooltip.nativeElement.style.top = this.getElementTop() -
                 this.tooltip.nativeElement.offsetHeight - this.tooltipPadding + 'px';
     }
 
     private getTopMeasureForLeftAndRight() {
-        this.isLessOrEqualThanNormalWidth() ? this.tooltip.nativeElement.style.top = this.getElementTop() - 2.5 + 'px'
-            : this.tooltip.nativeElement.style.top =
-            this.getElementTop() - this.tooltip.nativeElement.offsetHeight / 2 + this.tooltipPadding + 'px';
+      this.tooltip.nativeElement.style.top =
+        this.getElementTop() + (this.element.nativeElement.offsetHeight / 2) -
+         (this.tooltip.nativeElement.offsetHeight / 2) + 'px';
     }
 
-
     private getElementHeight() {
         this.existsMeasureOnNativeElement() ? this.elementHeight = this.element.nativeElement.offsetHeight :
             this.elementHeight = this.element.nativeElement.firstChild.clientHeight;
     }
 
     private setTopMeasureForBottom() {
-        this.tooltip.nativeElement.style.top = this.getElementTop() + this.elementHeight + this.tooltipPadding + 'px';
+        this.tooltip.nativeElement.style.top =
+          this.getElementTop() + this.elementHeight + this.tooltipPadding + 'px';
     }
 
     private setAlignCenter() {
-        this.tooltip.nativeElement.style.left = this.element.nativeElement.offsetLeft +
+        this.tooltip.nativeElement.style.left = this.element.nativeElement.getBoundingClientRect().left +
             (this.elementWidth / 2) - this.tooltip.nativeElement.offsetWidth / 2 + 'px';
     }
 
     private setAlignRight() {
-        this.tooltip.nativeElement.style.left = this.element.nativeElement.offsetLeft +
+        this.tooltip.nativeElement.style.left = this.element.nativeElement.getBoundingClientRect().left +
             this.elementWidth + this.tooltipPadding + 'px';
     }
 
     private setAlignLeft() {
-        this.tooltip.nativeElement.style.left = this.element.nativeElement.offsetLeft -
-            this.tooltip.nativeElement.offsetWidth - this.tooltipPadding + 'px';
+        this.tooltip.nativeElement.style.left = this.element.nativeElement.getBoundingClientRect().left
+          - this.tooltip.nativeElement.offsetWidth + 'px';
     }
 
     private getElementTop() {
-        return this.element.nativeElement.offsetTop;
+        return this.element.nativeElement.getBoundingClientRect().top;
     }
 }