From 59b510f97b42491ee3511ceda2c436a93652f5dc Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 23 Feb 2024 15:43:44 +0300
Subject: [PATCH] Fixed #5153 - Tooltip: OutOfBounds alignment does not affect
 tooltip arrow position

---
 components/lib/tooltip/Tooltip.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index 6c5896cb3..fda785019 100755
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -244,17 +244,11 @@ const Tooltip = BaseTooltip.extend('tooltip', {
         getTooltipElement(el) {
             return document.getElementById(el.$_ptooltipId);
         },
-        create(el, options) {
+        create(el) {
             const modifiers = el.$_ptooltipModifiers;
 
             const tooltipArrow = DomHandler.createElement('div', {
                 class: !this.isUnstyled() && this.cx('arrow'),
-                style: {
-                    top: modifiers?.bottom ? '0' : modifiers?.right || modifiers?.left || (!modifiers?.right && !modifiers?.left && !modifiers?.top && !modifiers?.bottom) ? '50%' : null,
-                    bottom: modifiers?.top ? '0' : null,
-                    left: modifiers?.right || (!modifiers?.right && !modifiers?.left && !modifiers?.top && !modifiers?.bottom) ? '0' : modifiers?.top || modifiers?.bottom ? '50%' : null,
-                    right: modifiers?.left ? '0' : null
-                },
                 'p-bind': this.ptm('arrow', {
                     context: modifiers
                 })
@@ -429,6 +423,13 @@ const Tooltip = BaseTooltip.extend('tooltip', {
             !this.isUnstyled() && DomHandler.addClass(tooltipElement, `p-tooltip-${position}`);
             tooltipElement.$_ptooltipPosition = position;
             tooltipElement.setAttribute('data-p-position', position);
+
+            let arrowElement = DomHandler.findSingle(tooltipElement, '[data-pc-section="arrow"]');
+
+            arrowElement.style.top = position === 'bottom' ? '0' : position === 'right' || position === 'left' || (position !== 'right' && position !== 'left' && position !== 'top' && position !== 'bottom') ? '50%' : null;
+            arrowElement.style.bottom = position === 'top' ? '0' : null;
+            arrowElement.style.left = position === 'right' || (position !== 'right' && position !== 'left' && position !== 'top' && position !== 'bottom') ? '0' : position === 'top' || position === 'bottom' ? '50%' : null;
+            arrowElement.style.right = position === 'left' ? '0' : null;
         },
         isOutOfBounds(el) {
             let tooltipElement = this.getTooltipElement(el);