Refactored tooltips position and alignment method (#17067)

primefaces · Dec 17, 2024 · 2aff865 · 2aff865
1 parent 5143936
commit 2aff865
Showing 1 changed file with 31 additions and 79 deletions.
diff --git a/packages/primeng/src/tooltip/tooltip.ts b/packages/primeng/src/tooltip/tooltip.ts
@@ -500,64 +500,17 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy {
     align() {
         let position = this.getOption('tooltipPosition');
 
-        switch (position) {
-            case 'top':
-                this.alignTop();
-                if (this.isOutOfBounds()) {
-                    this.alignBottom();
-                    if (this.isOutOfBounds()) {
-                        this.alignRight();
-
-                        if (this.isOutOfBounds()) {
-                            this.alignLeft();
-                        }
-                    }
-                }
-                break;
-
-            case 'bottom':
-                this.alignBottom();
-                if (this.isOutOfBounds()) {
-                    this.alignTop();
-                    if (this.isOutOfBounds()) {
-                        this.alignRight();
-
-                        if (this.isOutOfBounds()) {
-                            this.alignLeft();
-                        }
-                    }
-                }
-                break;
-
-            case 'left':
-                this.alignLeft();
-                if (this.isOutOfBounds()) {
-                    this.alignRight();
-
-                    if (this.isOutOfBounds()) {
-                        this.alignTop();
-
-                        if (this.isOutOfBounds()) {
-                            this.alignBottom();
-                        }
-                    }
-                }
-                break;
-
-            case 'right':
-                this.alignRight();
-                if (this.isOutOfBounds()) {
-                    this.alignLeft();
+        const positionPriority = {
+            top: [this.alignTop, this.alignBottom, this.alignRight, this.alignLeft],
+            bottom: [this.alignBottom, this.alignTop, this.alignRight, this.alignLeft],
+            left: [this.alignLeft, this.alignRight, this.alignTop, this.alignBottom],
+            right: [this.alignRight, this.alignLeft, this.alignTop, this.alignBottom]
+        };
 
-                    if (this.isOutOfBounds()) {
-                        this.alignTop();
-
-                        if (this.isOutOfBounds()) {
-                            this.alignBottom();
-                        }
-                    }
-                }
-                break;
+        for (let [index, alignmentFn] of positionPriority[position].entries()) {
+            if (index === 0) alignmentFn.call(this);
+            else if (this.isOutOfBounds()) alignmentFn.call(this);
+            else break;
         }
     }
 
@@ -573,44 +526,43 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy {
         }
     }
 
+    private get activeElement(): HTMLElement {
+        return this.el.nativeElement.nodeName.includes('P-') ? findSingle(this.el.nativeElement, '.p-component') : this.el.nativeElement;
+    }
+
     alignRight() {
         this.preAlign('right');
         const el = this.activeElement;
-
-        const hostOffset = this.getHostOffset();
-        const left = hostOffset.left + getOuterWidth(el);
-        const top = hostOffset.top + (getOuterHeight(el) - getOuterHeight(this.container)) / 2;
-        this.container.style.left = left + this.getOption('positionLeft') + 'px';
-        this.container.style.top = top + this.getOption('positionTop') + 'px';
-    }
-
-    private get activeElement(): HTMLElement {
-        return this.el.nativeElement.nodeName.includes('P-') ? findSingle(this.el.nativeElement, '.p-component') : this.el.nativeElement;
+        const offsetLeft = getOuterWidth(el);
+        const offsetTop = (getOuterHeight(el) - getOuterHeight(this.container)) / 2;
+        this.alignTooltip(offsetLeft, offsetTop);
     }
 
     alignLeft() {
         this.preAlign('left');
-        let hostOffset = this.getHostOffset();
-        let left = hostOffset.left - getOuterWidth(this.container);
-        let top = hostOffset.top + (getOuterHeight(this.el.nativeElement) - getOuterHeight(this.container)) / 2;
-        this.container.style.left = left + this.getOption('positionLeft') + 'px';
-        this.container.style.top = top + this.getOption('positionTop') + 'px';
+        let offsetLeft = getOuterWidth(this.container);
+        let offsetTop = (getOuterHeight(this.el.nativeElement) - getOuterHeight(this.container)) / 2;
+        this.alignTooltip(-offsetLeft, offsetTop);
     }
 
     alignTop() {
         this.preAlign('top');
-        let hostOffset = this.getHostOffset();
-        let left = hostOffset.left + (getOuterWidth(this.el.nativeElement) - getOuterWidth(this.container)) / 2;
-        let top = hostOffset.top - getOuterHeight(this.container);
-        this.container.style.left = left + this.getOption('positionLeft') + 'px';
-        this.container.style.top = top + this.getOption('positionTop') + 'px';
+        let offsetLeft = (getOuterWidth(this.el.nativeElement) - getOuterWidth(this.container)) / 2;
+        let offsetTop = getOuterHeight(this.container);
+        this.alignTooltip(offsetLeft, -offsetTop);
     }
 
     alignBottom() {
         this.preAlign('bottom');
+        let offsetLeft = (getOuterWidth(this.el.nativeElement) - getOuterWidth(this.container)) / 2;
+        let offsetTop = getOuterHeight(this.el.nativeElement);
+        this.alignTooltip(offsetLeft, offsetTop);
+    }
+
+    alignTooltip(offsetLeft, offsetTop) {
         let hostOffset = this.getHostOffset();
-        let left = hostOffset.left + (getOuterWidth(this.el.nativeElement) - getOuterWidth(this.container)) / 2;
-        let top = hostOffset.top + getOuterHeight(this.el.nativeElement);
+        let left = hostOffset.left + offsetLeft;
+        let top = hostOffset.top + offsetTop;
         this.container.style.left = left + this.getOption('positionLeft') + 'px';
         this.container.style.top = top + this.getOption('positionTop') + 'px';
     }