Refactor #1612

primefaces · Sep 28, 2021 · 11e89e1 · 11e89e1
1 parent b58f3dd
commit 11e89e1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 18 deletions.
diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
@@ -219,12 +219,10 @@ function alignBottom(el) {
 }
 
 function preAlign(el, position) {
-    const tipClass = el.$_ptooltipClass;
     let tooltipElement = getTooltipElement(el);
     tooltipElement.style.left = -999 + 'px';
     tooltipElement.style.top = -999 + 'px';
-    tooltipElement.className = 'p-tooltip p-component p-tooltip-' + position;
-    if (tipClass) tooltipElement.className += ' p-tooltip-' + tipClass;
+    tooltipElement.className = `p-tooltip p-component p-tooltip-${position} ${el.$_ptooltipClass||''}`;
 }
 
 function isOutOfBounds(el) {
@@ -274,7 +272,7 @@ const Tooltip = {
         else {
             target.$_ptooltipValue = options.value.value;
             target.$_ptooltipDisabled = options.value.disabled || false;
-            target.$_ptooltipClass = options.value.class || false;
+            target.$_ptooltipClass = options.value.class;
         }
 
         target.$_ptooltipZIndex = options.instance.$primevue && options.instance.$primevue.config && options.instance.$primevue.config.zIndex.tooltip;
@@ -305,7 +303,7 @@ const Tooltip = {
         else {
             target.$_ptooltipValue = options.value.value;
             target.$_ptooltipDisabled = options.value.disabled || false;
-            target.$_ptooltipClass = options.value.class || false;
+            target.$_ptooltipClass = options.value.class;
         }
     }
 };

diff --git a/src/views/tooltip/TooltipDemo.vue b/src/views/tooltip/TooltipDemo.vue
@@ -33,7 +33,7 @@
                 <Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
 
                 <h5>Custom Class</h5>
-                <InputText type="text" placeholder="Custom Class" v-tooltip.right="{value:'Invalid username', class: 'error'}" />
+                <InputText type="text" placeholder="Custom Class" v-tooltip.right="{value:'Invalid username', class: 'custom-error'}" />
             </div>
         </div>
 
@@ -52,11 +52,11 @@ export default {
 </script>
 
 <style>
-.p-tooltip-error .p-tooltip-text {
-    background-color: darksalmon;
-    color: darkred;
+.custom-error .p-tooltip-text {
+    background-color: var(--pink-800);
+    color: rgb(255, 255, 255);
 }
-.p-tooltip-error.p-tooltip-right .p-tooltip-arrow {
-    border-right-color: darksalmon;
+.custom-error.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: var(--pink-800);
 }
 </style>
diff --git a/src/views/tooltip/TooltipDoc.vue b/src/views/tooltip/TooltipDoc.vue
@@ -83,7 +83,7 @@ directives: {
                         <td>class</td>
                         <td>string</td>
                         <td>null</td>
-                        <td>When present, it adds a custom class of p-tooltip-*class* to the tooltip.</td>
+                        <td>When present, it adds a custom class to the tooltip.</td>
                     </tr>
                 </tbody>
             </table>
@@ -111,10 +111,6 @@ directives: {
                     <tr>
                         <td>p-tooltip-text</td>
                         <td>Text of the tooltip</td>
-                    </tr>
-                    <tr>
-                        <td>p-tooltip-*custom*</td>
-                        <td>Input element additional class created by the class property</td>
                     </tr>
 				</tbody>
 			</table>
@@ -158,14 +154,23 @@ export default {
         <Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
 
         <h5>Custom Class</h5>
-        <InputText type="text" placeholder="Custom Class" v-tooltip.right="{value:'Invalid username', class: 'error'}" />
+        <InputText type="text" placeholder="Custom Class" v-tooltip.right="{value:'Invalid username', class: 'custom-error'}" />
     </div>
 </template>
 
 <script>
 export default {
 }
 <\\/script>
+<style>
+.custom-error .p-tooltip-text {
+    background-color: var(--pink-800);
+    color: rgb(255, 255, 255);
+}
+.custom-error.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: var(--pink-800);
+}
+</style>
 `
                 },
                 'composition-api': {
@@ -196,14 +201,23 @@ export default {
         <Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
 
         <h5>Custom Class</h5>
-        <InputText type="text" placeholder="Custom Class" v-tooltip.right="{value:'Invalid username', class: 'error'}" />
+        <InputText type="text" placeholder="Custom Class" v-tooltip.right="{value:'Invalid username', class: 'custom-error'}" />
     </div>
 </template>
 
 <script>
 export default {
 }
 <\\/script>
+<style>
+.custom-error .p-tooltip-text {
+    background-color: var(--pink-800);
+    color: rgb(255, 255, 255);
+}
+.custom-error.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: var(--pink-800);
+}
+</style>
 `
                 }
             }