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

Fix tooltip shifting on long descriptions

Browse Source 
This puts the tooltip-container under the mouse even on scrollbar
shift due to long descriptions.
This commit is contained in:
Garrett Boone
2021-09-11 14:30:06 -04:00
committed by GitHub
parent d5d655c10a
commit e5d22682cb
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,7 +59,7 @@ function destroyIfNotOnTooltip(){var div=document.getElementById("tooltip-contai
function create(element){var contentElement=element.querySelector("script");if(contentElement){render(element,contentElement.innerHTML);return} 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)}})}} 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 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);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"} 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-20+"px";if(elementRect.left>(window.innerWidth-600)){var right=window.innerWidth-elementRect.right-window.scrollX;containerElement.style.right=right-25+"px"}else{var left=elementRect.left+window.scrollX;containerElement.style.left=left-25+"px"}
document.body.appendChild(containerElement);document.body.onclick=function(event){if(!containerElement.contains(event.target)){destroy()}}} 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 destroy(){var element=document.getElementById("tooltip-container");if(element){element.parentNode.removeChild(element)}}
function exists(){return!!document.getElementById("tooltip-container")} function exists(){return!!document.getElementById("tooltip-container")}

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

@@ -63,14 +63,14 @@ KB.on('dom.ready', function() {
var elementRect = element.getBoundingClientRect(); var elementRect = element.getBoundingClientRect();
var top = elementRect.top + window.scrollY + elementRect.height; var top = elementRect.top + window.scrollY + elementRect.height;
containerElement.style.top = top + "px"; containerElement.style.top = top - 20 + "px";
if (elementRect.left > (window.innerWidth - 600)) { if (elementRect.left > (window.innerWidth - 600)) {
var right = window.innerWidth - elementRect.right - window.scrollX; var right = window.innerWidth - elementRect.right - window.scrollX;
containerElement.style.right = right + "px"; containerElement.style.right = right - 25 + "px";
} else { } else {
var left = elementRect.left + window.scrollX; var left = elementRect.left + window.scrollX;
containerElement.style.left = left + "px"; containerElement.style.left = left - 25 + "px";
} }
document.body.appendChild(containerElement); document.body.appendChild(containerElement);