Rewrite tooltips code without jQuery

2 files changed, 86 insertions, 0 deletions

diff --git a/assets/js/core/bootstrap.js b/assets/js/core/bootstrap.js
index 8609155d..afcd95d5 100644
--- a/assets/js/core/bootstrap.js
+++ b/assets/js/core/bootstrap.js
@@ -3,5 +3,6 @@ document.addEventListener('DOMContentLoaded', function () {
     KB.render();
     KB.listen();
     KB.keyboardShortcuts();
+    KB.tooltip();
     KB.trigger('dom.ready');
 });
diff --git a/assets/js/core/tooltip.js b/assets/js/core/tooltip.js
new file mode 100644
index 00000000..acb42bbd
--- /dev/null
+++ b/assets/js/core/tooltip.js
@@ -0,0 +1,85 @@
+KB.tooltip = function () {
+    function onMouseOver(event) {
+        if (! exists()) {
+            create(event.target);
+        }
+    }
+
+    function onMouseLeaveContainer() {
+        setTimeout(destroy, 500);
+    }
+
+    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, true);
+        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, false);
+
+        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, false);
+    }
+};