From 1d365fd48087b052fe838ce921a3db7698392484 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 2 Nov 2023 10:21:31 +0300
Subject: [PATCH] Update tooltip docs

---
 doc/tooltip/AutoHideDoc.vue |  2 +-
 doc/tooltip/CustomDoc.vue   | 92 +++++++++++++++++++++++++++++++++++++
 doc/tooltip/DelayDoc.vue    | 16 +++----
 doc/tooltip/EventDoc.vue    | 18 +++-----
 doc/tooltip/PositionDoc.vue |  2 +-
 doc/tooltip/TemplateDoc.vue | 67 ---------------------------
 doc/tooltip/pt/PTDoc.vue    | 21 +++++++--
 pages/tooltip/index.vue     | 12 ++---
 8 files changed, 133 insertions(+), 97 deletions(-)
 create mode 100644 doc/tooltip/CustomDoc.vue
 delete mode 100644 doc/tooltip/TemplateDoc.vue

diff --git a/doc/tooltip/AutoHideDoc.vue b/doc/tooltip/AutoHideDoc.vue
index f0be0a13a..3116c951c 100644
--- a/doc/tooltip/AutoHideDoc.vue
+++ b/doc/tooltip/AutoHideDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Tooltip is hidden when mouse leaves the target element, in cases where tooltip needs to be interacted with, set <i>autoHide</i> to false to change the default behavior.</p>
+        <p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to change this behavior.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
diff --git a/doc/tooltip/CustomDoc.vue b/doc/tooltip/CustomDoc.vue
new file mode 100644
index 000000000..dd2f862e9
--- /dev/null
+++ b/doc/tooltip/CustomDoc.vue
@@ -0,0 +1,92 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A tooltip sample with a custom style and content.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-content-center">
+        <Button
+            v-tooltip.bottom="{
+                value: 'PrimeVue Rocks',
+                pt: {
+                    arrow: {
+                        style: {
+                            borderBottomColor: 'var(--primary-color)'
+                        }
+                    },
+                    text: 'bg-primary font-medium'
+                }
+            }"
+            severity="secondary"
+            label="Button"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button
+    v-tooltip.bottom="{
+        value: 'PrimeVue Rocks',
+        pt: {
+            arrow: {
+                style: {
+                    borderBottomColor: 'var(--primary-color)'
+                }
+            },
+            text: 'bg-primary font-medium'
+        }
+    }"
+    label="Button"
+/>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-content-center">
+        <Button
+            v-tooltip.bottom="{
+                value: 'PrimeVue Rocks',
+                pt: {
+                    arrow: {
+                        style: {
+                            borderBottomColor: 'var(--primary-color)'
+                        }
+                    },
+                    text: 'bg-primary font-medium'
+                }
+            }"
+            severity="secondary"
+            label="Button"
+        />
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-content-center">
+        <Button
+            v-tooltip.bottom="{
+                value: 'PrimeVue Rocks',
+                pt: {
+                    arrow: {
+                        style: {
+                            borderBottomColor: 'var(--primary-color)'
+                        }
+                    },
+                    text: 'bg-primary font-medium'
+                }
+            }"
+            severity="secondary"
+            label="Button"
+        />
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tooltip/DelayDoc.vue b/doc/tooltip/DelayDoc.vue
index 157127765..6e207fa46 100644
--- a/doc/tooltip/DelayDoc.vue
+++ b/doc/tooltip/DelayDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Adding delays to the show and hide events are defined with <i>showDelay</i> and <i>hideDelay</i> options respectively.</p>
+        <p>Dlays to the enter and leave events are defined with <i>showDelay</i> and <i>hideDelay</i> options respectively.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-2">
-        <InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />
+    <div class="card flex flex-wrap justify-content-center">
+        <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,19 +14,19 @@ export default {
         return {
             code: {
                 basic: `
-<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />
+<Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
-        <InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />
+    <div class="card flex flex-wrap justify-content-center">
+        <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
     </div>
 </template>
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
-        <InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />
+    <div class="card flex flex-wrap justify-content-center">
+        <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
     </div>
 </template>
 `
diff --git a/doc/tooltip/EventDoc.vue b/doc/tooltip/EventDoc.vue
index ec2888e06..6bf6a42c7 100644
--- a/doc/tooltip/EventDoc.vue
+++ b/doc/tooltip/EventDoc.vue
@@ -1,10 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Tooltip is configured via modifiers that can be chained. Also, tooltip gets displayed on hover event by default, use <i>focus</i> modifier as alternative to set.</p>
+        <p>Event to display the tooltip is defined as a modifier, default event is hover.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-content-center gap-2">
-        <InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" />
-        <Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
+        <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,22 +14,19 @@ export default {
         return {
             code: {
                 basic: `
-<InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" />
-<Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
+<InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
-        <InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" />
-        <Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
+    <div class="card flex flex-wrap justify-content-center">
+        <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
     </div>
 </template>
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
-        <InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" />
-        <Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
+    <div class="card flex flex-wrap justify-content-center">
+        <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
     </div>
 </template>
 `
diff --git a/doc/tooltip/PositionDoc.vue b/doc/tooltip/PositionDoc.vue
index 99f1cb4ea..3efa14b79 100644
--- a/doc/tooltip/PositionDoc.vue
+++ b/doc/tooltip/PositionDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>There are four choices to position the tooltip, default value is <i>right</i> and alternatives are <i>top</i>, <i>bottom</i>, <i>left</i>. Position is specified using a modifier.</p>
+        <p>There are four choices to position the tooltip, default value is <i>right</i> and alternatives are <i>top</i>, <i>bottom</i>, <i>left</i>.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
diff --git a/doc/tooltip/TemplateDoc.vue b/doc/tooltip/TemplateDoc.vue
deleted file mode 100644
index 46a10a4c1..000000000
--- a/doc/tooltip/TemplateDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Tooltip can be customized via <i>class</i> and <i>escape</i> properties.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-2">
-        <InputText v-tooltip.right="{ value: `<h4 class='text-white m-0'>PrimeVue Rocks!</h4>`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
-        <InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
-    </div>
-</template>
-
-<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: `
-<template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
-        <InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
-    </div>
-</template>
-
-<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>
-`
-            }
-        };
-    }
-};
-</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>
diff --git a/doc/tooltip/pt/PTDoc.vue b/doc/tooltip/pt/PTDoc.vue
index 6b8c02ea8..2a4ced1f1 100644
--- a/doc/tooltip/pt/PTDoc.vue
+++ b/doc/tooltip/pt/PTDoc.vue
@@ -25,7 +25,12 @@ export default {
     v-tooltip.right="{
         value: \`PrimeVue Rocks!\`,
         pt: {
-            text: 'bg-primary'
+            arrow: {
+                style: {
+                    borderRightColor: 'var(--primary-color)'
+                }
+            },
+            text: 'bg-primary font-medium'
         }
     }"
     type="text"
@@ -37,7 +42,12 @@ export default {
         v-tooltip.right="{
             value: \`PrimeVue Rocks!\`,
             pt: {
-                text: 'bg-primary'
+                arrow: {
+                    style: {
+                        borderRightColor: 'var(--primary-color)'
+                    }
+                },
+                text: 'bg-primary font-medium'
             }
         }"
         type="text"
@@ -51,7 +61,12 @@ export default {
         v-tooltip.right="{
             value: \`PrimeVue Rocks!\`,
             pt: {
-                text: 'bg-primary'
+                arrow: {
+                    style: {
+                        borderRightColor: 'var(--primary-color)'
+                    }
+                },
+                text: 'bg-primary font-medium'
             }
         }"
         type="text"
diff --git a/pages/tooltip/index.vue b/pages/tooltip/index.vue
index 5d6a4af31..60a5b836f 100755
--- a/pages/tooltip/index.vue
+++ b/pages/tooltip/index.vue
@@ -5,11 +5,11 @@
 <script>
 import AccessibilityDoc from '@/doc/tooltip/AccessibilityDoc.vue';
 import AutoHideDoc from '@/doc/tooltip/AutoHideDoc.vue';
+import CustomDoc from '@/doc/tooltip/CustomDoc.vue';
 import DelayDoc from '@/doc/tooltip/DelayDoc.vue';
 import EventDoc from '@/doc/tooltip/EventDoc.vue';
 import ImportDoc from '@/doc/tooltip/ImportDoc.vue';
 import PositionDoc from '@/doc/tooltip/PositionDoc.vue';
-import TemplateDoc from '@/doc/tooltip/TemplateDoc.vue';
 import PTComponent from '@/doc/tooltip/pt/index.vue';
 import ThemingDoc from '@/doc/tooltip/theming/index.vue';
 
@@ -32,11 +32,6 @@ export default {
                     label: 'Event',
                     component: EventDoc
                 },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
                 {
                     id: 'autohide',
                     label: 'Auto Hide',
@@ -47,6 +42,11 @@ export default {
                     label: 'Delay',
                     component: DelayDoc
                 },
+                {
+                    id: 'custom',
+                    label: 'Custom',
+                    component: CustomDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',