From a630b5b7deecdeb231358b01d91731a15577059a Mon Sep 17 00:00:00 2001 From: Eskiso Date: Sat, 24 Aug 2019 03:04:23 +0100 Subject: 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/core/tooltip.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'assets/js/core') 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); } }; -- cgit v1.2.3