From 5b876bebfcc7b122fc48fa21f3c2a78f2ee05c31 Mon Sep 17 00:00:00 2001
From: MiAnMy <31629565+MiAnMy@users.noreply.github.com>
Date: Tue, 17 Oct 2023 09:11:39 +0200
Subject: [PATCH] Tooltip: autoHide (#4126)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add autohide to tooltip

* Add missing enter

---------

Co-authored-by: Mikołaj Andrasiak <mikolaj.andrasiak@ncbj.gov.pl>
---
 components/lib/tooltip/Tooltip.d.ts          |  7 +++-
 components/lib/tooltip/Tooltip.js            | 27 ++++++++++++-
 components/lib/tooltip/style/TooltipStyle.js |  1 -
 doc/tooltip/AutoHideDoc.vue                  | 41 ++++++++++++++++++++
 pages/tooltip/index.vue                      |  6 +++
 5 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 doc/tooltip/AutoHideDoc.vue

diff --git a/components/lib/tooltip/Tooltip.d.ts b/components/lib/tooltip/Tooltip.d.ts
index 44e75d11e6..09666d6bd8 100755
--- a/components/lib/tooltip/Tooltip.d.ts
+++ b/components/lib/tooltip/Tooltip.d.ts
@@ -67,7 +67,12 @@ export interface TooltipOptions {
      */
     hideDelay?: number | undefined;
     /**
-     * Used to pass attributes to DOM elements inside the component.
+     * Whether to hide tooltip when hovering over tooltip content.
+     * @defaultValue true
+     */
+     autoHide?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
      * @type {TooltipDirectivePassThroughOptions}
      */
     pt?: PassThrough<TooltipDirectivePassThroughOptions>;
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index 83bc593c22..4b5ecc4a07 100755
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -17,6 +17,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
             target.$_ptooltipIdAttr = UniqueComponentId() + '_tooltip';
             target.$_ptooltipShowDelay = 0;
             target.$_ptooltipHideDelay = 0;
+            target.$_ptooltipAutoHide = true;
         } else if (typeof options.value === 'object' && options.value) {
             if (ObjectUtils.isEmpty(options.value.value) || options.value.value.trim() === '') return;
             else {
@@ -28,6 +29,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
                 target.$_ptooltipIdAttr = options.value.id || UniqueComponentId() + '_tooltip';
                 target.$_ptooltipShowDelay = options.value.showDelay || 0;
                 target.$_ptooltipHideDelay = options.value.hideDelay || 0;
+                target.$_ptooltipAutoHide = !!options.value.autoHide === options.value.autoHide ? options.value.autoHide : true;
             }
         }
 
@@ -55,6 +57,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
             target.$_ptooltipIdAttr = target.$_ptooltipIdAttr || UniqueComponentId() + '_tooltip';
             target.$_ptooltipShowDelay = 0;
             target.$_ptooltipHideDelay = 0;
+            target.$_ptooltipAutoHide = true;
 
             this.bindEvents(target, options);
         } else if (typeof options.value === 'object' && options.value) {
@@ -71,6 +74,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
                 target.$_ptooltipIdAttr = options.value.id || target.$_ptooltipIdAttr || UniqueComponentId() + '_tooltip';
                 target.$_ptooltipShowDelay = options.value.showDelay || 0;
                 target.$_ptooltipHideDelay = options.value.hideDelay || 0;
+                target.$_ptooltipAutoHide = !!options.value.autoHide === options.value.autoHide ? options.value.autoHide : true;
 
                 this.bindEvents(target, options);
             }
@@ -148,8 +152,21 @@ const Tooltip = BaseTooltip.extend('tooltip', {
         onMouseLeave(event) {
             const el = event.currentTarget;
             const hideDelay = el.$_ptooltipHideDelay;
-
-            this.hide(el, hideDelay);
+            const autoHide = el.$_ptooltipAutoHide;
+
+            if (!autoHide) {
+                const valid =
+                    DomHandler.hasClass(event.target, 'p-tooltip') ||
+                    DomHandler.hasClass(event.target, 'p-tooltip-arrow') ||
+                    DomHandler.hasClass(event.target, 'p-tooltip-text') ||
+                    DomHandler.hasClass(event.relatedTarget, 'p-tooltip') ||
+                    DomHandler.hasClass(event.relatedTarget, 'p-tooltip-text') ||
+                    DomHandler.hasClass(event.relatedTarget, 'p-tooltip-arrow');
+
+                !valid && this.hide(el, hideDelay);
+            } else {
+                this.hide(el, hideDelay);
+            }
         },
         onFocus(event, options) {
             const el = event.currentTarget;
@@ -195,6 +212,12 @@ const Tooltip = BaseTooltip.extend('tooltip', {
                 window.removeEventListener('resize', onWindowResize);
             });
 
+            tooltipElement.addEventListener('mouseleave', function onTooltipLeave() {
+                $this.hide(el);
+
+                tooltipElement.removeEventListener('mouseleave', onTooltipLeave);
+            });
+
             this.bindScrollListener(el);
             ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex);
         },
diff --git a/components/lib/tooltip/style/TooltipStyle.js b/components/lib/tooltip/style/TooltipStyle.js
index 93cfaba701..3ca0db2a94 100644
--- a/components/lib/tooltip/style/TooltipStyle.js
+++ b/components/lib/tooltip/style/TooltipStyle.js
@@ -5,7 +5,6 @@ const css = `
     .p-tooltip {
         position:absolute;
         display:none;
-        pointer-events:none;
         padding: .25em .5rem;
         max-width: 12.5rem;
     }
diff --git a/doc/tooltip/AutoHideDoc.vue b/doc/tooltip/AutoHideDoc.vue
new file mode 100644
index 0000000000..f0be0a13a4
--- /dev/null
+++ b/doc/tooltip/AutoHideDoc.vue
@@ -0,0 +1,41 @@
+<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>
+    </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" />
+        <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        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" />
+`,
+                options: `
+<template>
+    <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" />
+        <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <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" />
+        <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/tooltip/index.vue b/pages/tooltip/index.vue
index e6b425e2da..5d6a4af312 100755
--- a/pages/tooltip/index.vue
+++ b/pages/tooltip/index.vue
@@ -4,6 +4,7 @@
 
 <script>
 import AccessibilityDoc from '@/doc/tooltip/AccessibilityDoc.vue';
+import AutoHideDoc from '@/doc/tooltip/AutoHideDoc.vue';
 import DelayDoc from '@/doc/tooltip/DelayDoc.vue';
 import EventDoc from '@/doc/tooltip/EventDoc.vue';
 import ImportDoc from '@/doc/tooltip/ImportDoc.vue';
@@ -36,6 +37,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'autohide',
+                    label: 'Auto Hide',
+                    component: AutoHideDoc
+                },
                 {
                     id: 'delay',
                     label: 'Delay',