Fixed issue of tooltip not disapearing

Tooltips would not disappear if the mouse was never on it. If you move your mouse on an icon and then move the mouse out without passing by the tooltip, the tooltip would remain active until mouse pass and leave or click somewhere else.

With this update, the tooltip will be removed if you leave the target unless you move the mouse to the tooltip.

1 files changed, 16 insertions, 0 deletions

diff --git a/assets/js/core/tooltip.js b/assets/js/core/tooltip.js
index acb42bbd..ae5ac1c8 100644
--- a/assets/js/core/tooltip.js
+++ b/assets/js/core/tooltip.js
@@ -9,6 +9,19 @@ KB.tooltip = function () {
         setTimeout(destroy, 500);
     }
 
+    function mouseLeftParent() {
+        setTimeout(destroyIfNotOnTooltip, 500);
+    }
+
+    function mouseOnTooltip() {
+        document.getElementById("tooltip-container").mouseOnTooltip = true;
+    }
+
+    function destroyIfNotOnTooltip() {
+        var div = document.getElementById("tooltip-container");
+        if(div != null && !div.mouseOnTooltip) destroy();
+    }
+
     function create(element) {
         var contentElement = element.querySelector("script");
         if (contentElement) {
@@ -45,6 +58,8 @@ KB.tooltip = function () {
         containerElement.id = "tooltip-container";
         containerElement.innerHTML = html;
         containerElement.addEventListener("mouseleave", onMouseLeaveContainer, false);
+        containerElement.addEventListener("mouseenter", mouseOnTooltip, false);
+        containerElement.mouseOnTooltip = false;
 
         var elementRect = element.getBoundingClientRect();
         var top = elementRect.top + window.scrollY + elementRect.height;
@@ -81,5 +96,6 @@ KB.tooltip = function () {
     var elements = document.querySelectorAll(".tooltip");
     for (var i = 0; i < elements.length; i++) {
         elements[i].addEventListener("mouseenter", onMouseOver, false);
+        elements[i].addEventListener("mouseleave", mouseLeftParent, false);
     }
 };