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.

assets/js/app.min.js

@@ -53,14 +53,17 @@ return viewport.width<800?'75%':'800px'}
 KB.on('modal.close',function(){destroy()});KB.on('modal.submit',function(){submitForm()});KB.modal={open:function(url,size,overlayClickDestroy){KB.trigger('modal.open');_KB.get('Dropdown').close();destroy();if(typeof overlayClickDestroy==='undefined'){overlayClickDestroy=!0}
 KB.http.get(url).success(function(response){isOpen=!0;create(response,getWidth(size),overlayClickDestroy)})},close:function(){destroy()},isOpen:function(){return isOpen},replace:function(url){KB.http.get(url).success(function(response){replace(response)})},getForm:getForm,submitForm:submitForm}}());KB.tooltip=function(){function onMouseOver(event){if(!exists()){create(event.target)}}
 function onMouseLeaveContainer(){setTimeout(destroy,500)}
+function mouseLeftParent(){setTimeout(destroyIfNotOnTooltip,500)}
+function mouseOnTooltip(){document.getElementById("tooltip-container").mouseOnTooltip=!0}
+function destroyIfNotOnTooltip(){var div=document.getElementById("tooltip-container");if(div!=null&&!div.mouseOnTooltip)destroy()}
 function create(element){var contentElement=element.querySelector("script");if(contentElement){render(element,contentElement.innerHTML);return}
 var link=element.dataset.href;if(link){fetch(link,function(html){if(html){render(element,html)}})}}
 function fetch(url,callback){var request=new XMLHttpRequest();request.open("GET",url,!0);request.setRequestHeader("X-Requested-With","XMLHttpRequest");request.onreadystatechange=function(){if(request.readyState===XMLHttpRequest.DONE){if(request.status===200){callback(request.responseText)}}};request.send(null)}
-function render(element,html){var containerElement=document.createElement("div");containerElement.id="tooltip-container";containerElement.innerHTML=html;containerElement.addEventListener("mouseleave",onMouseLeaveContainer,!1);var elementRect=element.getBoundingClientRect();var top=elementRect.top+window.scrollY+elementRect.height;containerElement.style.top=top+"px";if(elementRect.left>(window.innerWidth-600)){var right=window.innerWidth-elementRect.right-window.scrollX;containerElement.style.right=right+"px"}else{var left=elementRect.left+window.scrollX;containerElement.style.left=left+"px"}
+function render(element,html){var containerElement=document.createElement("div");containerElement.id="tooltip-container";containerElement.innerHTML=html;containerElement.addEventListener("mouseleave",onMouseLeaveContainer,!1);containerElement.addEventListener("mouseenter",mouseOnTooltip,!1);containerElement.mouseOnTooltip=!1;var elementRect=element.getBoundingClientRect();var top=elementRect.top+window.scrollY+elementRect.height;containerElement.style.top=top+"px";if(elementRect.left>(window.innerWidth-600)){var right=window.innerWidth-elementRect.right-window.scrollX;containerElement.style.right=right+"px"}else{var left=elementRect.left+window.scrollX;containerElement.style.left=left+"px"}
 document.body.appendChild(containerElement);document.body.onclick=function(event){if(!containerElement.contains(event.target)){destroy()}}}
 function destroy(){var element=document.getElementById("tooltip-container");if(element){element.parentNode.removeChild(element)}}
 function exists(){return!!document.getElementById("tooltip-container")}
-var elements=document.querySelectorAll(".tooltip");for(var i=0;i<elements.length;i++){elements[i].addEventListener("mouseenter",onMouseOver,!1)}};KB.utils.formatDuration=function(d){if(d>=86400){return Math.round(d/86400)+"d"}else if(d>=3600){return Math.round(d/3600)+"h"}else if(d>=60){return Math.round(d/60)+"m"}
+var elements=document.querySelectorAll(".tooltip");for(var i=0;i<elements.length;i++){elements[i].addEventListener("mouseenter",onMouseOver,!1);elements[i].addEventListener("mouseleave",mouseLeftParent,!1)}};KB.utils.formatDuration=function(d){if(d>=86400){return Math.round(d/86400)+"d"}else if(d>=3600){return Math.round(d/3600)+"h"}else if(d>=60){return Math.round(d/60)+"m"}
 return d+"s"};KB.utils.getSelectionPosition=function(element){var selectionStart,selectionEnd;if(element.value.length<element.selectionStart){selectionStart=element.value.length}else{selectionStart=element.selectionStart}
 if(element.selectionStart===element.selectionEnd){selectionEnd=selectionStart}else{selectionEnd=element.selectionEnd}
 return{selectionStart:selectionStart,selectionEnd:selectionEnd}};KB.utils.arraysIdentical=function(a,b){var i=a.length;if(i!==b.length){return!1}

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);
     }
 };