From d993b4f6f31d78f423995d03d75bfbd9967e12f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 31 Jul 2023 10:47:30 +0300
Subject: [PATCH] Refactor #4211 - For Tooltip

---
 components/lib/tooltip/BaseTooltip.js | 12 ++---------
 components/lib/tooltip/Tooltip.d.ts   | 31 ++++++++++++++++++++++++++-
 components/lib/tooltip/Tooltip.js     | 20 ++++++++++++++---
 3 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/components/lib/tooltip/BaseTooltip.js b/components/lib/tooltip/BaseTooltip.js
index ff533b35e..edf448477 100644
--- a/components/lib/tooltip/BaseTooltip.js
+++ b/components/lib/tooltip/BaseTooltip.js
@@ -20,8 +20,8 @@ const styles = `
 }
 
 .p-tooltip .p-tooltip-text {
-   white-space: pre-line;
-   word-break: break-word;
+    white-space: pre-line;
+    word-break: break-word;
 }
 
 .p-tooltip-arrow {
@@ -33,15 +33,11 @@ const styles = `
 }
 
 .p-tooltip-right .p-tooltip-arrow {
-    top: 50%;
-    left: 0;
     margin-top: -.25rem;
     border-width: .25em .25em .25em 0;
 }
 
 .p-tooltip-left .p-tooltip-arrow {
-    top: 50%;
-    right: 0;
     margin-top: -.25rem;
     border-width: .25em 0 .25em .25rem;
 }
@@ -51,15 +47,11 @@ const styles = `
 }
 
 .p-tooltip-top .p-tooltip-arrow {
-    bottom: 0;
-    left: 50%;
     margin-left: -.25rem;
     border-width: .25em .25em 0;
 }
 
 .p-tooltip-bottom .p-tooltip-arrow {
-    top: 0;
-    left: 50%;
     margin-left: -.25rem;
     border-width: 0 .25em .25rem;
 }
diff --git a/components/lib/tooltip/Tooltip.d.ts b/components/lib/tooltip/Tooltip.d.ts
index 59a591838..1920f63e5 100755
--- a/components/lib/tooltip/Tooltip.d.ts
+++ b/components/lib/tooltip/Tooltip.d.ts
@@ -10,7 +10,14 @@
 import { DirectiveBinding, ObjectDirective } from 'vue';
 import { DirectiveHooks } from '../basedirective';
 
-export declare type TooltipDirectivePassThroughOptionType = TooltipDirectivePassThroughAttributes | null | undefined;
+export declare type TooltipDirectivePassThroughOptionType = TooltipDirectivePassThroughAttributes | ((options: TooltipPassThroughMethodOptions) => TooltipDirectivePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TooltipPassThroughMethodOptions {
+    context: TooltipContext;
+}
 
 /**
  * Defines options of Tooltip.
@@ -96,6 +103,28 @@ export interface TooltipDirectivePassThroughAttributes {
     [key: string]: any;
 }
 
+/**
+ * Defines current options in Tooltip directive.
+ */
+export interface TooltipContext {
+    /**
+     * Current top position state as a boolean.
+     */
+    top: boolean;
+    /**
+     * Current right position state as a boolean.
+     */
+    right: boolean;
+    /**
+     * Current bottom position state as a boolean.
+     */
+    bottom: boolean;
+    /**
+     * Current left position state as a boolean.
+     */
+    left: boolean;
+}
+
 /**
  * Defines modifiers of Tooltip.
  */
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index 2a44a3465..31668a6dd 100755
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -225,14 +225,26 @@ const Tooltip = BaseTooltip.extend('tooltip', {
             return document.getElementById(el.$_ptooltipId);
         },
         create(el, options) {
+            const modifiers = el.$_ptooltipModifiers;
+
             const tooltipArrow = DomHandler.createElement('div', {
                 class: !el.unstyled && this.cx('arrow'),
-                'p-bind': this.ptm('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
+                })
             });
 
             const tooltipText = DomHandler.createElement('div', {
                 class: !el.unstyled && this.cx('text'),
-                'p-bind': this.ptm('text')
+                'p-bind': this.ptm('text', {
+                    context: modifiers
+                })
             });
 
             if (el.$_ptooltipEscape) {
@@ -252,7 +264,9 @@ const Tooltip = BaseTooltip.extend('tooltip', {
                         width: el.$_ptooltipFitContent ? 'fit-content' : undefined
                     },
                     class: [!el.unstyled && this.cx('root'), el.$_ptooltipClass],
-                    'p-bind': this.ptm('root')
+                    'p-bind': this.ptm('root', {
+                        context: modifiers
+                    })
                 },
                 tooltipArrow,
                 tooltipText