Rewrite tooltips code without jQuery

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

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

assets/js/src/BoardDragAndDrop.js

@@ -103,6 +103,7 @@ Kanboard.BoardDragAndDrop.prototype.refresh = function(data) {
     this.app.hideLoadingIcon();
     this.executeListeners();
     this.dragAndDrop();
+    KB.tooltip();
 };
 
 Kanboard.BoardDragAndDrop.prototype.executeListeners = function() {

assets/js/src/Tooltip.js

@@ -1,75 +0,0 @@
-Kanboard.Tooltip = function(app) {
-    this.app = app;
-};
-
-Kanboard.Tooltip.prototype.onBoardRendered = function() {
-    this.execute();
-};
-
-Kanboard.Tooltip.prototype.execute = function() {
-    $(".tooltip").tooltip({
-        track: false,
-        show: false,
-        hide: false,
-        position: {
-            my: 'left-20 top',
-            at: 'center bottom+9',
-            using: function(position, feedback) {
-
-                $(this).css(position);
-
-                var arrow_pos = feedback.target.left + feedback.target.width / 2 - feedback.element.left - 20;
-
-                $("<div>")
-                    .addClass("tooltip-arrow")
-                    .addClass(feedback.vertical)
-                    .addClass(arrow_pos < 1 ? "align-left" : "align-right")
-                    .appendTo(this);
-            }
-        },
-        content: function() {
-            var _this = this;
-            var href = $(this).attr('data-href');
-
-            if (! href) {
-                return '<div class="markdown">' + $(this).attr("title") + '</div>';
-            }
-
-            $.get(href, function setTooltipContent(data) {
-                var tooltip = $('.ui-tooltip:visible');
-
-                $('.ui-tooltip-content:visible').html(data);
-
-                // Clear previous position, it interferes with the updated position computation
-                tooltip.css({ top: '', left: '' });
-
-                // Remove arrow, it will be added when repositionning
-                tooltip.children('.tooltip-arrow').remove();
-
-                // Reposition the tooltip
-                var position = $(_this).tooltip("option", "position");
-                position.of = $(_this);
-                tooltip.position(position);
-            });
-
-            return '<i class="fa fa-spinner fa-spin"></i>';
-        }
-    })
-    .on("mouseenter", function() {
-        var _this = this;
-        $(this).tooltip("open");
-
-        $(".ui-tooltip").on("mouseleave", function() {
-            $(_this).tooltip('close');
-        });
-    }).on("mouseleave focusout", function(e) {
-        e.stopImmediatePropagation();
-        var _this = this;
-
-        setTimeout(function() {
-            if (! $(".ui-tooltip:hover").length) {
-                $(_this).tooltip("close");
-            }
-        }, 100);
-    });
-};

assets/sass/_tooltip.sass

@@ -1,49 +1,23 @@
 @import variables
 
-.tooltip-arrow:after
+.tooltip
+  i.fa
+    cursor: pointer
+
+  .fa-info-circle
+    color: color('light')
+
+#tooltip-container
+  padding: 5px
   background: #fff
-  border: 1px solid #aaaaaa
-  box-shadow: 0 0 5px #aaa
-
-div.ui-tooltip
-  min-width: 200px
-  max-width: 600px
-
-.tooltip-arrow
-  width: 20px
-  height: 10px
-  overflow: hidden
+  border: 1px solid #ddd
+  border-radius: 4px
+  box-shadow: 0 6px 12px #aaa
   position: absolute
-  &.top
-    top: -10px
-  &.bottom
-    bottom: -10px
-  &.align-left
-    left: 10px
-  &.align-right
-    right: 10px
-  &:after
-    content: ""
-    position: absolute
-    width: 14px
-    height: 14px
-    -webkit-transform: rotate(45deg)
-    -ms-transform: rotate(45deg)
-    transform: rotate(45deg)
-  &.bottom:after
-    top: -10px
-  &.top:after
-    bottom: -10px
-  &.align-left:after
-    left: 0
-  &.align-right:after
-    right: 0
+  min-width: 350px
 
-.tooltip-large
-  width: 600px
+  .markdown p
+    margin-bottom: 0
 
-.ui-tooltip-content .markdown p
-  margin-bottom: 0
-
-.tooltip .fa-info-circle
-  color: color('light')
+  .tooltip-large
+    width: 600px