tooltip.js updated

components/lib/tooltip/Tooltip.js

@@ -47,30 +47,49 @@ 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) {
+let timer;
+
+function show(el, showDelay) {
+    function tooltipActions() {
         if (el.$_ptooltipDisabled) {
             return;
         }
@@ -92,11 +111,28 @@ function show(el) {
         ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex);
     }
 
-function hide(el) {
+    if (showDelay !== undefined) {
+        timer = setTimeout(tooltipActions, showDelay);
+    } else {
+        tooltipActions();
+    }
+}
+
+function hide(el, hideDelay) {
+    function tooltipRemoval() {
         remove(el);
         unbindScrollListener(el);
     }
 
+    clearTimeout(timer);
+
+    if (hideDelay !== undefined) {
+        setTimeout(tooltipRemoval, hideDelay);
+    } else {
+        tooltipRemoval();
+    }
+}
+
 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;
             }
         }