Fixed #1612 - Feature: Custom Tooltip classes (#1572)

* Added custom classes to the tooltip for use in errors * Added source to docs
primefaces · Sep 28, 2021 · b58f3dd · b58f3dd
1 parent bb82b6a
commit b58f3dd
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
@@ -219,10 +219,12 @@ 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;
 }
 
 function isOutOfBounds(el) {
@@ -267,10 +269,12 @@ const Tooltip = {
         else if (typeof options.value === 'string') {
             target.$_ptooltipValue = options.value;
             target.$_ptooltipDisabled = false;
+            target.$_ptooltipClass = null;
         }
         else {
             target.$_ptooltipValue = options.value.value;
             target.$_ptooltipDisabled = options.value.disabled || false;
+            target.$_ptooltipClass = options.value.class || false;
         }
 
         target.$_ptooltipZIndex = options.instance.$primevue && options.instance.$primevue.config && options.instance.$primevue.config.zIndex.tooltip;
@@ -296,10 +300,12 @@ const Tooltip = {
         if (typeof options.value === 'string') {
             target.$_ptooltipValue = options.value;
             target.$_ptooltipDisabled = false;
+            target.$_ptooltipClass = null;
         }
         else {
             target.$_ptooltipValue = options.value.value;
             target.$_ptooltipDisabled = options.value.disabled || false;
+            target.$_ptooltipClass = options.value.class || false;
         }
     }
 };

diff --git a/src/views/tooltip/TooltipDemo.vue b/src/views/tooltip/TooltipDemo.vue
@@ -31,6 +31,9 @@
 
                 <h5>Button</h5>
                 <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'}" />
             </div>
         </div>
 
@@ -49,5 +52,11 @@ export default {
 </script>
 
 <style>
-
+.p-tooltip-error .p-tooltip-text {
+    background-color: darksalmon;
+    color: darkred;
+}
+.p-tooltip-error.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: darksalmon;
+}
 </style>
diff --git a/src/views/tooltip/TooltipDoc.vue b/src/views/tooltip/TooltipDoc.vue
@@ -79,6 +79,12 @@ directives: {
                         <td>false</td>
                         <td>When present, it specifies that the component should be disabled.</td>
                     </tr>
+                    <tr>
+                        <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>
+                    </tr>
                 </tbody>
             </table>
         </div>
@@ -105,6 +111,10 @@ 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>
@@ -146,6 +156,9 @@ export default {
 
         <h5>Button</h5>
         <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'}" />
     </div>
 </template>
 
@@ -181,6 +194,9 @@ export default {
 
         <h5>Button</h5>
         <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'}" />
     </div>
 </template>
 
@@ -194,4 +210,4 @@ export default {
         }
     }
 }
-</script>
+</script>