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

assets/css/comment.css

@@ -33,6 +33,14 @@
     border-bottom: 1px dotted #aaa;
 }
 
+.ui-tooltip .comment-title {
+    font-size: 80%;
+}
+
+.ui-tooltip .comment-inner {
+    padding-bottom: 0;
+}
+
 .comment-actions {
     font-size: 0.8em;
     padding: 0;

assets/css/jquery-ui-1.10.4.custom.css

@@ -1,6 +1,6 @@
 /*! jQuery UI - v1.10.4 - 2014-05-29
 * http://jqueryui.com
-* Includes: jquery.ui.core.css, jquery.ui.datepicker.css, jquery.ui.theme.css
+* Includes: jquery.ui.core.css, jquery.ui.datepicker.css, jquery.ui.tooltip.css, jquery.ui.theme.css
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
 * Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
 
@@ -251,6 +251,17 @@
 	border-right-width: 0;
 	border-left-width: 1px;
 }
+.ui-tooltip {
+	padding: 8px;
+	position: absolute;
+	z-index: 9999;
+	max-width: 300px;
+	-webkit-box-shadow: 0 0 5px #aaa;
+	box-shadow: 0 0 5px #aaa;
+}
+body .ui-tooltip {
+	border-width: 2px;
+}
 
 /* Component containers
 ----------------------------------*/
@@ -620,7 +631,7 @@
 .ui-corner-right,
 .ui-corner-tr {
 	border-top-right-radius: 4px;
-}
+}jquery.ui.tooltip.css, 
 .ui-corner-all,
 .ui-corner-bottom,
 .ui-corner-left,

assets/css/tooltip.css

@@ -0,0 +1,65 @@
+/* tooltip */
+.tooltip-arrow:after {
+    background: #fff;
+    border: 1px solid #aaaaaa;
+    box-shadow: 0 0 5px #aaa;
+}
+
+div.ui-tooltip {
+    min-width: 200px;
+    max-width: 600px;
+    font-size: 0.95em;
+}
+
+.tooltip-arrow {
+    width: 20px;
+    height: 10px;
+    overflow: hidden;
+    position: absolute;
+}
+
+.tooltip-arrow.top {
+    top: -10px;
+}
+
+.tooltip-arrow.bottom {
+    bottom: -10px;
+}
+
+.tooltip-arrow.align-left {
+    left: 10px;
+}
+
+.tooltip-arrow.align-right {
+    right: 10px;
+}
+
+.tooltip-arrow:after {
+    content: "";
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.tooltip-arrow.bottom:after {
+    top: -10px;
+}
+
+.tooltip-arrow.top:after {
+    bottom: -10px;
+}
+
+.tooltip-arrow.align-left:after {
+    left: 0px;
+}
+
+.tooltip-arrow.align-right:after {
+    right: 0px;
+}
+
+.tooltip-large {
+    width: 550px;
+}

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() {