diff --git a/apps/showcase/doc/tooltip/AutoHideDoc.vue b/apps/showcase/doc/tooltip/AutoHideDoc.vue
index 134d88567..ab27de8bb 100644
--- a/apps/showcase/doc/tooltip/AutoHideDoc.vue
+++ b/apps/showcase/doc/tooltip/AutoHideDoc.vue
@@ -1,10 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to change this behavior.</p>
+        <p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to customize this behavior so that tooltip stays open when the cursor is on the tooltip.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
-        <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
+        <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,22 +15,22 @@ export default {
         return {
             code: {
                 basic: `
-<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
-<InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
+<InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
-        <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
+        <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
     </div>
 </template>
 `,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
-        <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
+        <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
     </div>
 </template>
 `
diff --git a/apps/showcase/doc/tree/BasicDoc.vue b/apps/showcase/doc/tree/BasicDoc.vue
index 488b538e3..15f5a1c80 100644
--- a/apps/showcase/doc/tree/BasicDoc.vue
+++ b/apps/showcase/doc/tree/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Tree component requires an array of TreeNode objects as its <i>value</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@@ -20,7 +20,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
@@ -42,7 +42,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
diff --git a/apps/showcase/doc/tree/ControlledDoc.vue b/apps/showcase/doc/tree/ControlledDoc.vue
index 55a4fab7e..dc31eb2db 100644
--- a/apps/showcase/doc/tree/ControlledDoc.vue
+++ b/apps/showcase/doc/tree/ControlledDoc.vue
@@ -5,7 +5,7 @@
             <i>expandedKeys</i> also supports two-way binding with the v-model directive.
         </p>
     </DocSectionText>
-    <div class="card flex flex-col items-center">
+    <div class="card">
         <div class="flex flex-wrap gap-2 mb-6">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
             <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
@@ -33,7 +33,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-col align-items-cente">
+    <div class="card">
         <div class="flex flex-wrap gap-2 mb-6">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
             <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
@@ -81,7 +81,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-col align-items-cente">
+    <div class="card">
         <div class="flex flex-wrap gap-2 mb-6">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
             <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
diff --git a/apps/showcase/doc/tree/EventsDoc.vue b/apps/showcase/doc/tree/EventsDoc.vue
index 253f8f9a6..52517471b 100644
--- a/apps/showcase/doc/tree/EventsDoc.vue
+++ b/apps/showcase/doc/tree/EventsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>An event is provided for each type of user interaction such as expand, collapse and selection.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree
             v-model:selectionKeys="selectedKey"
             :value="nodes"
@@ -27,12 +27,12 @@ export default {
             selectedKey: null,
             code: {
                 basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false" class="w-full md:w-[30rem]"
+<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
     @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
             @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
@@ -62,7 +62,7 @@ export default {
             this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
         },
         onNodeCollapse(node) {
-            this.$toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 });
+            this.$toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
         }
     }
 }
@@ -70,7 +70,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
             @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
@@ -103,7 +103,7 @@ const onNodeExpand = (node) => {
 };
 
 const onNodeCollapse (node) => {
-    toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 });
+    toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
 };
 <\/script>
 `,
@@ -151,7 +151,7 @@ const onNodeCollapse (node) => {
             this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
         },
         onNodeCollapse(node) {
-            this.$toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 });
+            this.$toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
         }
     }
 };
diff --git a/apps/showcase/doc/tree/TemplateDoc.vue b/apps/showcase/doc/tree/TemplateDoc.vue
index 404b85c66..f89a4f43c 100644
--- a/apps/showcase/doc/tree/TemplateDoc.vue
+++ b/apps/showcase/doc/tree/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Each node can have a distinct template by matching the <i>type</i> property to the slot name.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree :value="nodes" class="w-full md:w-[30rem]">
             <template #default="slotProps">
                 <b>{{ slotProps.node.label }}</b>
@@ -54,7 +54,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree :value="nodes" class="w-full md:w-[30rem]">
             <template #default="slotProps">
                 <b>{{ slotProps.node.label }}</b>
@@ -99,7 +99,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree :value="nodes" class="w-full md:w-[30rem]">
             <template #default="slotProps">
                 <b>{{ slotProps.node.label }}</b>
diff --git a/apps/showcase/doc/tree/selection/CheckboxDoc.vue b/apps/showcase/doc/tree/selection/CheckboxDoc.vue
index abe31e97a..ee7188b12 100644
--- a/apps/showcase/doc/tree/selection/CheckboxDoc.vue
+++ b/apps/showcase/doc/tree/selection/CheckboxDoc.vue
@@ -6,7 +6,7 @@
             selection.
         </p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@@ -26,7 +26,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
     </div>
@@ -57,7 +57,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
     </div>
diff --git a/apps/showcase/doc/tree/selection/MultipleDoc.vue b/apps/showcase/doc/tree/selection/MultipleDoc.vue
index 764e4c582..e02fd4bc5 100644
--- a/apps/showcase/doc/tree/selection/MultipleDoc.vue
+++ b/apps/showcase/doc/tree/selection/MultipleDoc.vue
@@ -6,12 +6,12 @@
         </p>
         <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
     </DocSectionText>
-    <div class="card flex flex-col items-center justify-center">
+    <div class="card">
         <div class="flex items-center mb-6 gap-2">
             <ToggleSwitch v-model="checked" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
 </template>
@@ -27,17 +27,17 @@ export default {
             selectedKey: null,
             code: {
                 basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" class="w-full md:w-[30rem]"
+<Tree v-model:selectionKeys="selectedKey" :value="nodes"
     selectionMode="multiple" :metaKeySelection="checked"></Tree>
 `,
                 options: `
 <template>
-    <div class="card flex flex-col items-center justify-center">
+    <div class="card">
         <div class="flex items-center mb-6 gap-2">
             <ToggleSwitch v-model="checked" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
@@ -60,12 +60,12 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-col items-center justify-center">
+    <div class="card">
         <div class="flex items-center mb-6 gap-2">
             <ToggleSwitch v-model="checked" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
diff --git a/apps/showcase/doc/tree/selection/SingleDoc.vue b/apps/showcase/doc/tree/selection/SingleDoc.vue
index 9a001ae90..030b29997 100644
--- a/apps/showcase/doc/tree/selection/SingleDoc.vue
+++ b/apps/showcase/doc/tree/selection/SingleDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Single node selection is configured by setting <i>selectionMode</i> as <i>single</i> along with <i>selectionKeys</i> property to manage the selection value binding.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@@ -21,7 +21,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
     </div>
@@ -52,7 +52,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
     </div>