AS1024/Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed issue of tooltip not disapearing

Browse Source 
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.
This commit is contained in:
Eskiso
2019-08-24 03:04:23 +01:00
committed by Frédéric Guillot
parent 24422b0adf
commit a630b5b7de
2 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/js/app.min.js vendored
View File

@@ -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}

16
assets/js/core/tooltip.js
View File

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