From 5128b6e362b87626131d706c160b5f3a3be82cca 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: Wed, 14 Jun 2023 17:10:55 +0300
Subject: [PATCH] Refactor #3965 - For Tooltip CSS

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

diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index 1ef657fc3..d67564c8f 100755
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -136,6 +136,23 @@ function getTooltipElement(el) {
     return document.getElementById(el.$_ptooltipId);
 }
 
+function setGlobalPTOptions(el, container) {
+    const addCSS = (element, section) => {
+        section.class && DomHandler.addMultipleClasses(element, section.class);
+        section.style && DomHandler.addStyles(element, section.style);
+    };
+
+    el.$_ptooltipPTOptions.css && addCSS(container, el.$_ptooltipPTOptions.css.root);
+    el.$_ptooltipPTCss && addCSS(container, el.$_ptooltipPTCss.root);
+
+    for (let section of ['arrow', 'text']) {
+        const element = DomHandler.findSingle(container, `[data-pc-section="${section}"]`);
+
+        el.$_ptooltipPTOptions.css[section] && addCSS(element, el.$_ptooltipPTOptions.css[section]);
+        el.$_ptooltipPTCss[section] && addCSS(element, el.$_ptooltipPTCss[section]);
+    }
+}
+
 function create(el) {
     const id = el.$_ptooltipIdAttr !== '' ? el.$_ptooltipIdAttr : UniqueComponentId() + '_tooltip';
 
@@ -144,15 +161,22 @@ function create(el) {
     let container = document.createElement('div');
 
     container.id = id;
+    container.setAttribute('data-pc-section', 'root');
+    container.setAttribute('data-pc-name', 'tooltip');
 
     let tooltipArrow = document.createElement('div');
 
-    tooltipArrow.className = 'p-tooltip-arrow';
+    tooltipArrow.setAttribute('data-pc-section', 'arrow');
     container.appendChild(tooltipArrow);
 
     let tooltipText = document.createElement('div');
 
-    tooltipText.className = 'p-tooltip-text';
+    tooltipText.setAttribute('data-pc-section', 'text');
+
+    if (!el.$_ptooltipUnstyled) {
+        tooltipArrow.className = 'p-tooltip-arrow';
+        tooltipText.className = 'p-tooltip-text';
+    }
 
     if (el.$_ptooltipEscape) {
         tooltipText.innerHTML = el.$_ptooltipValue;
@@ -171,6 +195,8 @@ function create(el) {
         container.style.width = 'fit-content';
     }
 
+    setGlobalPTOptions(el, container);
+
     return container;
 }
 
@@ -306,7 +332,7 @@ function preAlign(el, position) {
 
     tooltipElement.style.left = -999 + 'px';
     tooltipElement.style.top = -999 + 'px';
-    tooltipElement.className = `p-tooltip p-component p-tooltip-${position} ${el.$_ptooltipClass || ''}`;
+    tooltipElement.className += el.$_ptooltipUnstyled ? el.$_ptooltipClass : ` p-tooltip p-component p-tooltip-${position} ${el.$_ptooltipClass || ''}`;
 }
 
 function isOutOfBounds(el) {
@@ -356,28 +382,36 @@ const Tooltip = {
             target.$_ptooltipEscape = false;
             target.$_ptooltipClass = null;
             target.$_ptooltipFitContent = true;
+            target.$_ptooltipIdAttr = '';
             target.$_ptooltipShowDelay = 0;
             target.$_ptooltipHideDelay = 0;
+            target.$_ptooltipPTCss = '';
         } else if (typeof options.value === 'object' && options.value) {
             if (ObjectUtils.isEmpty(options.value.value) || options.value.value.trim() === '') return;
             else {
-                /* eslint-disable */
                 target.$_ptooltipValue = options.value.value;
                 target.$_ptooltipDisabled = !!options.value.disabled === options.value.disabled ? options.value.disabled : false;
                 target.$_ptooltipEscape = !!options.value.escape === options.value.escape ? options.value.escape : false;
-                target.$_ptooltipClass = options.value.class;
+                target.$_ptooltipClass = options.value.class || '';
                 target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
                 target.$_ptooltipIdAttr = options.value.id || '';
                 target.$_ptooltipShowDelay = options.value.showDelay || 0;
                 target.$_ptooltipHideDelay = options.value.hideDelay || 0;
+                target.$_ptooltipPTCss = options.value.pt && options.value.pt.css;
             }
         }
 
-        target.$_ptooltipZIndex = options.instance.$primevue && options.instance.$primevue.config && options.instance.$primevue.config.zIndex.tooltip;
+        if (options.instance.$primevue && options.instance.$primevue.config) {
+            target.$_ptooltipZIndex = options.instance.$primevue.config.zIndex.tooltip;
+            target.$_ptooltipUnstyled = options.instance.$primevue.config.unstyled || false;
+            target.$_ptooltipPTOptions = options.instance.$primevue.config.pt && options.instance.$primevue.config.pt.directives && options.instance.$primevue.config.pt.directives.tooltip;
+        }
+
         bindEvents(target);
     },
     unmounted(el) {
         let target = getTarget(el);
+
         remove(target);
         unbindEvents(target);
 
@@ -388,10 +422,12 @@ const Tooltip = {
     },
     updated(el, options) {
         let target = getTarget(el);
+
         target.$_ptooltipModifiers = getModifiers(options);
 
         if (!options.value) {
             unbindEvents(target);
+
             return;
         }
 
@@ -403,26 +439,32 @@ const Tooltip = {
             target.$_ptooltipIdAttr = '';
             target.$_ptooltipShowDelay = 0;
             target.$_ptooltipHideDelay = 0;
+            target.$_ptooltipPTCss = '';
 
             bindEvents(target);
         } else if (typeof options.value === 'object' && options.value) {
             if (ObjectUtils.isEmpty(options.value.value) || options.value.value.trim() === '') {
                 unbindEvents(target);
+
                 return;
             } else {
-                /* eslint-disable */
                 target.$_ptooltipValue = options.value.value;
                 target.$_ptooltipDisabled = !!options.value.disabled === options.value.disabled ? options.value.disabled : false;
                 target.$_ptooltipEscape = !!options.value.escape === options.value.escape ? options.value.escape : false;
-                target.$_ptooltipClass = options.value.class;
+                target.$_ptooltipClass = options.value.class || '';
                 target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
                 target.$_ptooltipIdAttr = options.value.id || '';
                 target.$_ptooltipShowDelay = options.value.showDelay || 0;
                 target.$_ptooltipHideDelay = options.value.hideDelay || 0;
+                target.$_ptooltipPTCss = options.value.pt && options.value.pt.css;
 
                 bindEvents(target);
             }
         }
+
+        if (options.instance.$primevue && options.instance.$primevue.config) {
+            target.$_ptooltipPTOptions = options.instance.$primevue.config.pt && options.instance.$primevue.config.pt.directives && options.instance.$primevue.config.pt.directives.tooltip;
+        }
     }
 };