fix(ui): tooltip doesnt close on scroll EBS-1264 (#218)

* fix(ui): tooltip doesnt close on scroll EBS-1264 * fix(ui): refactor EBS-1264 --------- Co-authored-by: Mihkel.Paloots <[email protected]>
e-gov · Jan 15, 2024 · 73d446a · 73d446a
1 parent 0361500
commit 73d446a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/libs/styles/src/lib/scss/components/_tooltip.scss b/libs/styles/src/lib/scss/components/_tooltip.scss
@@ -9,8 +9,9 @@
     }
     #{$base}__content {
       border-radius: var(--cvi-radius-s);
-      background-color: get-color(white);
-      color: get-color(black-coral-18);
+      background-color: get-color(black-coral-12);
+      color: get-color(white);
+      font-weight: get-font-weight(beta);
       box-shadow: var(--cvi-shadow-beta);
       padding: var(--cvi-spacing-rapla) var(--cvi-spacing-elva);
       max-width: 400px;
@@ -27,7 +28,7 @@
       // If --cvi-tooltip-zindex is not set, --arrow-configurable-index is not set too
       --arrow-configurable-index: calc(var(--cvi-tooltip-zindex) + 1);
 
-      background-color: get-color(white);
+      background-color: get-color(black-coral-12);
       transform: rotate(45deg);
       width: 15px;
       height: 15px;

diff --git a/libs/ui/src/lib/status-badge/status-badge.component.html b/libs/ui/src/lib/status-badge/status-badge.component.html
@@ -5,6 +5,7 @@
     svgClass="cvi-status-badge__badge-icon"
     [name]="tooltipIcon"
     [cviNgTooltip]="tooltipText ? tooltipText : ''"
+    [tooltipRight]=15
     dataAttribute="test-tooltip-source"
     [height]="16"
   ></cvi-ng-icon>

diff --git a/libs/ui/src/lib/tooltip/tooltip.directive.ts b/libs/ui/src/lib/tooltip/tooltip.directive.ts
@@ -18,6 +18,8 @@ import { TooltipComponent } from './tooltip.component';
 export class TooltipDirective {
   @Input() cviNgTooltip = '';
 
+  @Input() tooltipRight = 0;
+
   private componentRef: ComponentRef<TooltipComponent> | null = null;
 
   constructor(
@@ -109,16 +111,26 @@ export class TooltipDirective {
         tooltipArrowPositionY = top - halfOfArrowWidth * 3;
       }
 
-      this.componentRef.instance.left = tooltipPositionX;
+      this.componentRef.instance.left = tooltipPositionX + this.tooltipRight;
       this.componentRef.instance.top = tooltipPositionY;
-      this.componentRef.instance.arrowLeft = tooltipArrowPositionX;
+      this.componentRef.instance.arrowLeft =
+        tooltipArrowPositionX + this.tooltipRight;
       this.componentRef.instance.arrowTop = tooltipArrowPositionY;
       this.componentRef.changeDetectorRef.detectChanges();
     }
   }
 
   @HostListener('mouseleave')
   onMouseLeave() {
+    this.DestroyComponent();
+  }
+
+  @HostListener('window:scroll', ['$event'])
+  onWindowScroll() {
+    this.DestroyComponent();
+  }
+
+  private DestroyComponent() {
     if (this.componentRef !== null) {
       this.componentRef.destroy();
       this.componentRef = null;