Integrate tooltips and code cleanup/fix bugs, see #166

assets/js/board.js

@@ -35,6 +35,69 @@ Kanboard.Board = (function() {
         // Description popover
         $(".task-description-popover").click(Kanboard.Popover);
 
+        // Tooltips
+        $(".task-board-tooltip").tooltip({
+            track: 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 == 0 ? "align-left" : "align-right")
+                        .appendTo(this);
+                }
+            },
+            content: function(e) {
+                var href = $(this).attr('data-href');
+
+                if (! href) {
+                    return;
+                }
+
+                $.get(href, function setTooltipContent(data) {
+
+                    $('.ui-tooltip-content:visible').html(data);
+
+                    // Toggle subtasks status
+                    $('#tooltip-subtasks a').click(function(e) {
+
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        $.get($(this).attr('href'), setTooltipContent);
+                    });
+                });
+
+                return '<i class="fa fa-refresh fa-spin fa-2x"></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);
+        });
+
         // Redirect to the task details page
         $("[data-task-url]").each(function() {
             $(this).click(function() {