Merge pull request #3845 from sezisfurkan/issue-3764

Tooltip: Delay option

components/lib/tooltip/Tooltip.d.ts

@@ -40,6 +40,16 @@ export interface TooltipOptions {
      * @defaultValue true
      */
     fitContent?: boolean | undefined;
+    /**
+     * When present, it adds a custom delay to the tooltip's display.
+     * @defaultValue 0
+     */
+    showDelay?: number | undefined;
+    /**
+     * When present, it adds a custom delay to the tooltip's hiding.
+     * @defaultValue 0
+     */
+    hideDelay?: number | undefined;
 }
 
 /**

components/lib/tooltip/Tooltip.js

@@ -1,5 +1,7 @@
 import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 
+let timer;
+
 function bindEvents(el) {
     const modifiers = el.$_ptooltipModifiers;
 
@@ -47,30 +49,46 @@ function unbindScrollListener(el) {
 }
 
 function onMouseEnter(event) {
-    show(event.currentTarget);
+    const el = event.currentTarget;
+    const showDelay = el.$_ptooltipShowDelay;
+
+    show(event.currentTarget, showDelay);
 }
 
 function onMouseLeave(event) {
-    hide(event.currentTarget);
+    const el = event.currentTarget;
+    const hideDelay = el.$_ptooltipHideDelay;
+
+    hide(event.currentTarget, hideDelay);
 }
 
 function onFocus(event) {
-    show(event.currentTarget);
+    const el = event.currentTarget;
+    const showDelay = el.$_ptooltipShowDelay;
+
+    console.log('focus', showDelay);
+    show(event.currentTarget, showDelay);
 }
 
 function onBlur(event) {
-    hide(event.currentTarget);
+    const el = event.currentTarget;
+    const hideDelay = el.$_ptooltipHideDelay;
+
+    hide(event.currentTarget, hideDelay);
 }
 
 function onClick(event) {
-    hide(event.currentTarget);
+    const el = event.currentTarget;
+    const hideDelay = el.$_ptooltipHideDelay;
+
+    hide(event.currentTarget, hideDelay);
 }
 
 function onKeydown(event) {
-    event.code === 'Escape' && hide(event.currentTarget);
+    event.code === 'Escape' && hide(event.currentTarget, hideDelay);
 }
 
-function show(el) {
+function tooltipActions(el) {
     if (el.$_ptooltipDisabled) {
         return;
     }
@@ -92,11 +110,29 @@ function show(el) {
     ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex);
 }
 
-function hide(el) {
+function show(el, showDelay) {
+    if (showDelay !== undefined) {
+        timer = setTimeout(() => tooltipActions(el), showDelay);
+    } else {
+        tooltipActions(el);
+    }
+}
+
+function tooltipRemoval(el) {
     remove(el);
     unbindScrollListener(el);
 }
 
+function hide(el, hideDelay) {
+    clearTimeout(timer);
+
+    if (hideDelay !== undefined) {
+        setTimeout(() => tooltipRemoval(el), hideDelay);
+    } else {
+        tooltipRemoval(el);
+    }
+}
+
 function getTooltipElement(el) {
     return document.getElementById(el.$_ptooltipId);
 }
@@ -332,6 +368,8 @@ const Tooltip = {
                 target.$_ptooltipClass = options.value.class;
                 target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
                 target.$_ptooltipIdAttr = options.value.id || '';
+                target.$_ptooltipShowDelay = options.value.showDelay || 0;
+                target.$_ptooltipHideDelay = options.value.hideDelay || 0;
             }
         }
 

doc/tooltip/DelayDoc.vue

@@ -0,0 +1,34 @@
+<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>
+    </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>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />`,
+                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>
+</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>
+</template>`
+            }
+        };
+    }
+};
+</script>

pages/tooltip/index.vue

@@ -9,6 +9,7 @@ import ImportDoc from '@/doc/tooltip/ImportDoc';
 import PositionDoc from '@/doc/tooltip/PositionDoc';
 import StyleDoc from '@/doc/tooltip/StyleDoc';
 import TemplateDoc from '@/doc/tooltip/TemplateDoc';
+import DelayDoc from '@/doc/tooltip/DelayDoc';
 
 export default {
     data() {
@@ -34,6 +35,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'delay',
+                    label: 'Delay',
+                    component: DelayDoc
+                },
                 {
                     id: 'style',
                     label: 'Style',