Refactor #4211 - For Tooltip

components/lib/tooltip/BaseTooltip.js

@@ -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;
 }

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.
  */

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