diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
index ac85be43d5..e2d3b1049b 100755
--- 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
index a1e0c28f6e..0acd2931ef 100755
--- 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
index 17a817124a..9c62693b2c 100755
--- 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,7 +154,7 @@ 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>
 
@@ -166,6 +162,15 @@ export default {
 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,7 +201,7 @@ 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>
 
@@ -204,6 +209,15 @@ export default {
 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>
 `
                 }
             }