fix: fix tooltip offset calculation

bimeister · Jul 13, 2023 · db9ed11 · db9ed11
1 parent 8fd3c5a
commit db9ed11
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/projects/kit/src/components/tooltip/components/tooltip-content/tooltip-content.component.ts b/projects/kit/src/components/tooltip/components/tooltip-content/tooltip-content.component.ts
@@ -12,7 +12,7 @@ import {
 } from '@angular/core';
 import { filterFalsy, filterNotNil, Nullable } from '@bimeister/utilities';
 import { BehaviorSubject, fromEvent, Observable, Subscription, zip } from 'rxjs';
-import { map, take, withLatestFrom } from 'rxjs/operators';
+import { distinctUntilChanged, map, take, withLatestFrom } from 'rxjs/operators';
 import { TOOLTIP_SERVICE_TOKEN } from '../../../../declarations/tokens/tooltip-service.token';
 import { TooltipServiceDeclaration } from '../../../../declarations/interfaces/tooltip-service-declaration.interface';
 
@@ -119,7 +119,10 @@ export class TooltipContentComponent implements OnDestroy {
     );
 
     return zip(offsetXPx$, offsetYPx$)
-      .pipe(map(([offsetXPx, offsetYPx]: [number, number]) => `translate(${offsetXPx}px, ${offsetYPx}px)`))
+      .pipe(
+        map(([offsetXPx, offsetYPx]: [number, number]) => `translate(${offsetXPx}px, ${offsetYPx}px)`),
+        distinctUntilChanged()
+      )
       .subscribe((transformStyle: string) => {
         this.styleTransform$.next(transformStyle);
         this.detectChanges();

diff --git a/projects/kit/src/components/tooltip/services/tooltip.service.ts b/projects/kit/src/components/tooltip/services/tooltip.service.ts
@@ -132,12 +132,14 @@ export class TooltipService implements OnDestroy, TooltipServiceDeclaration {
     this.getPositionStrategy()
       .pipe(take(1), filterNotNil())
       .subscribe((positionStrategy: FlexibleConnectedPositionStrategy) => {
+        this.tooltipPositionStrategy$.next(positionStrategy);
+
         const overlayConfig: OverlayConfig = new OverlayConfig({
           positionStrategy,
         });
         const overlayRef: OverlayRef = this.overlay.create(overlayConfig);
+
         this.overlayRef$.next(overlayRef);
-        this.tooltipPositionStrategy$.next(positionStrategy);
       });
   }
 
@@ -150,6 +152,7 @@ export class TooltipService implements OnDestroy, TooltipServiceDeclaration {
           .position()
           .flexibleConnectedTo(triggerRef)
           .withPositions(OVERLAY_POSITIONS)
+          .withGrowAfterOpen()
           .withViewportMargin(OVERLAY_VIEWPORT_MARGIN_PX);
 
         return positionStrategy;