Merge pull request #436 from spenceralger/responsive-tooltip

The tooltip should be more responsive

js/shared.js

@@ -299,6 +299,17 @@
     }
     return sortedObj;
   };
+
+  kbn.query_color_dot = function (color, diameter) {
+    return '<div style="' + [
+        'vertical-align:middle',
+        'border-radius:10px',
+        'display:inline-block',
+        'background:' + color,
+        'height:' + diameter + 'px',
+        'width:' + diameter + 'px',
+      ].join(';') + '"></div>';
+  };
 }).call(this);
 
 /*
@@ -310,19 +321,13 @@ _.mixin({
 
     array.splice(toIndex, 0, array.splice(fromIndex, 1)[0] );
     return array;
-  }
-});
-
-_.mixin({
+  },
   remove: function (array, index) {
     'use strict';
 
     array.splice(index, 1);
     return array;
-  }
-});
-
-_.mixin({
+  },
   toggleInOut: function(array,value) {
     'use strict';
     if(_.contains(array,value)) {
@@ -333,3 +338,47 @@ _.mixin({
     return array;
   }
 });
+
+/**
+ * jQuery plugins
+ */
+(function () {
+  'use strict';
+
+  var $win = $(window);
+
+  $.fn.place_tt = (function () {
+    var defaults = {
+      offset: 5,
+      css: {
+        position : 'absolute',
+        top : -1000,
+        left : 0,
+        color : "#c8c8c8",
+        padding : '10px',
+        'font-size': '11pt',
+        'font-weight' : 200,
+        'background-color': '#1f1f1f',
+        'border-radius': '5px',
+      }
+    };
+
+    return function (x, y, opts) {
+      opts = $.extend(true, {}, defaults, opts);
+      return this.each(function () {
+        var $tooltip = $(this), width, height;
+
+        $tooltip.css(opts.css);
+        if (!$.contains(document.body, $tooltip[0])) {
+          $tooltip.appendTo(document.body);
+        }
+
+        width = $tooltip.outerWidth(true);
+        height = $tooltip.outerHeight(true);
+
+        $tooltip.css('left', x + opts.offset + width > $win.width() ? x - opts.offset - width : x + opts.offset);
+        $tooltip.css('top', y + opts.offset + height > $win.height() ? y - opts.offset - height : y + opts.offset);
+      });
+    };
+  })();
+}());

panels/histogram/module.js

@@ -424,32 +424,18 @@ angular.module('kibana.histogram', [])
         return "%H:%M:%S";
       }
 
-      function tt(x, y, contents) {
-        // If the tool tip already exists, don't recreate it, just update it
-        var tooltip = $('#pie-tooltip').length ? $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
-
-        tooltip.html(contents).css({
-          position: 'absolute',
-          top     : y + 5,
-          left    : x + 5,
-          color   : "#c8c8c8",
-          padding : '10px',
-          'font-size': '11pt',
-          'font-weight' : 200,
-          'background-color': '#1f1f1f',
-          'border-radius': '5px',
-        }).appendTo("body");
-      }
-
+      var $tooltip = $('<div>');
       elem.bind("plothover", function (event, pos, item) {
         if (item) {
-          tt(pos.pageX, pos.pageY,
-            "<div style='vertical-align:middle;display:inline-block;background:"+
-            item.series.color+";height:15px;width:15px;border-radius:10px;'></div> "+
-            item.datapoint[1].toFixed(0) + " @ " +
-            moment(item.datapoint[0]).format('MM/DD HH:mm:ss'));
+          $tooltip
+            .html(
+              kbn.query_color_dot(item.series.color, 15) + ' ' +
+              item.datapoint[1].toFixed(0) + " @ " +
+              moment(item.datapoint[0]).format('MM/DD HH:mm:ss')
+            )
+            .place_tt(pos.pageX, pos.pageY);
         } else {
-          $("#pie-tooltip").remove();
+          $tooltip.detach();
         }
       });
 

panels/hits/module.js

@@ -246,32 +246,16 @@ angular.module('kibana.hits', [])
         });
       }
 
-      function tt(x, y, contents) {
-        var tooltip = $('#pie-tooltip').length ?
-          $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
-        //var tooltip = $('#pie-tooltip')
-        tooltip.html(contents).css({
-          position: 'absolute',
-          top     : y + 5,
-          left    : x + 5,
-          color   : "#c8c8c8",
-          padding : '10px',
-          'font-size': '11pt',
-          'font-weight' : 200,
-          'background-color': '#1f1f1f',
-          'border-radius': '5px',
-        }).appendTo("body");
-      }
-
+      var $tooltip = $('<div>');
       elem.bind("plothover", function (event, pos, item) {
         if (item) {
           var value = scope.panel.chart === 'bar' ?
             item.datapoint[1] : item.datapoint[1][0][1];
-          tt(pos.pageX, pos.pageY,
-            "<div style='vertical-align:middle;border-radius:10px;display:inline-block;background:"+
-            item.series.color+";height:20px;width:20px'></div> "+value.toFixed(0));
+          $tooltip
+            .html(kbn.query_color_dot(item.series.color, 20) + ' ' + value.toFixed(0))
+            .place_tt(pos.pageX, pos.pageY);
         } else {
-          $("#pie-tooltip").remove();
+          $tooltip.remove();
         }
       });
 

panels/pie/module.js

@@ -262,24 +262,7 @@ angular.module('kibana.pie', [])
 
       }
 
-      function tt(x, y, contents) {
-        var tooltip = $('#pie-tooltip').length ?
-          $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
-
-        tooltip.html(contents).css({
-          position: 'absolute',
-          top     : y + 10,
-          left    : x + 10,
-          color   : "#c8c8c8",
-          padding : '10px',
-          'font-size': '11pt',
-          'font-weight' : 200,
-          'background-color': '#1f1f1f',
-          'border-radius': '5px',
-        }).appendTo("body");
-      }
-
-      elem.bind("plotclick", function (event, pos, object) {
+      elem.bind('plotclick', function (event, pos, object) {
         if (!object) {
           return;
         }
@@ -289,14 +272,20 @@ angular.module('kibana.pie', [])
         }
       });
 
-      elem.bind("plothover", function (event, pos, item) {
+      var $tooltip = $('<div>');
+      elem.bind('plothover', function (event, pos, item) {
         if (item) {
-          var percent = parseFloat(item.series.percent).toFixed(1) + "%";
-          tt(pos.pageX, pos.pageY, "<div "+"style='vertical-align:middle;display:inline-block;"+
-            "background:"+item.series.color+";height:15px;width:15px;border-radius:10px;'></div> "+
-            (item.series.label||"")+ " " + percent);
+          $tooltip
+            .html([
+              kbn.query_color_dot(item.series.color, 15),
+              (item.series.label || ''),
+              parseFloat(item.series.percent).toFixed(1) + '%'
+            ].join(' '))
+            .place_tt(pos.pageX, pos.pageY, {
+              offset: 10
+            });
         } else {
-          $("#pie-tooltip").remove();
+          $tooltip.remove();
         }
       });
 

panels/terms/module.js

@@ -268,39 +268,24 @@ angular.module('kibana.terms', [])
         });
       }
 
-      function tt(x, y, contents) {
-        var tooltip = $('#pie-tooltip').length ?
-          $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
-        //var tooltip = $('#pie-tooltip')
-        tooltip.html(contents).css({
-          position: 'absolute',
-          top     : y + 5,
-          left    : x + 5,
-          color   : "#c8c8c8",
-          padding : '10px',
-          'font-size': '11pt',
-          'font-weight' : 200,
-          'background-color': '#1f1f1f',
-          'border-radius': '5px',
-        }).appendTo("body");
-      }
-
       elem.bind("plotclick", function (event, pos, object) {
         if(object) {
           scope.build_search(scope.data[object.seriesIndex]);
         }
       });
 
+      var $tooltip = $('<div>');
       elem.bind("plothover", function (event, pos, item) {
         if (item) {
-          var value = scope.panel.chart === 'bar' ?
-            item.datapoint[1] : item.datapoint[1][0][1];
-          tt(pos.pageX, pos.pageY,
-            "<div style='vertical-align:middle;border-radius:10px;display:inline-block;background:"+
-            item.series.color+";height:20px;width:20px'></div> "+item.series.label+
-            " ("+value.toFixed(0)+")");
+          var value = scope.panel.chart === 'bar' ? item.datapoint[1] : item.datapoint[1][0][1];
+          $tooltip
+            .html(
+              kbn.query_color_dot(item.series.color, 20) + ' ' +
+              item.series.label + " (" + value.toFixed(0)+")"
+            )
+            .place_tt(pos.pageX, pos.pageY);
         } else {
-          $("#pie-tooltip").remove();
+          $tooltip.remove();
         }
       });