Make tooltip shareable like crosshair

public/app/features/dashboard/model.ts

@@ -19,6 +19,7 @@ export class DashboardModel {
   timezone: any;
   editable: any;
   sharedCrosshair: any;
+  sharedTooltip: any;
   rows: DashboardRow[];
   time: any;
   timepicker: any;
@@ -52,6 +53,7 @@ export class DashboardModel {
     this.timezone = data.timezone || '';
     this.editable = data.editable !== false;
     this.sharedCrosshair = data.sharedCrosshair || false;
+    this.sharedTooltip = data.sharedTooltip || false;
     this.hideControls = data.hideControls || false;
     this.time = data.time || { from: 'now-6h', to: 'now' };
     this.timepicker = data.timepicker || {};

public/app/features/dashboard/partials/settings.html

@@ -67,6 +67,12 @@
                         checked="dashboard.sharedCrosshair"
                         label-class="width-11">
         </gf-form-switch>
+        <gf-form-switch class="gf-form"
+                        label="Shared Tooltip"
+                        tooltip="Shared Tooltip on all graphs."
+                        checked="dashboard.sharedTooltip"
+                        label-class="width-11">
+        </gf-form-switch>
       </div>
     </div>
 

public/app/plugins/panel/graph/graph.ts

@@ -34,6 +34,9 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) {
       var rootScope = scope.$root;
       var panelWidth = 0;
       var thresholdManager = new ThresholdManager(ctrl);
+      var tooltip = new GraphTooltip(elem, dashboard, scope, function() {
+        return sortedSeries;
+      });
       var plot;
 
       ctrl.events.on('panel-teardown', () => {
@@ -64,6 +67,19 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) {
         }
       }, scope);
 
+      rootScope.onAppEvent('setTooltip', function(event, info) {
+        // do not need to to this if event is from this panel
+        // or another panel is in fullscreen mode
+        if (info.scope === scope || ctrl.otherPanelInFullscreenMode()) {
+          return;
+        }
+        tooltip.setTooltip(info.pos);
+      }, scope);
+
+      rootScope.onAppEvent('clearTooltip', function() {
+        tooltip.clearTooltip();
+      }, scope);
+
       // Receive render events
       ctrl.events.on('render', function(renderData) {
         data = renderData || data;
@@ -555,10 +571,6 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) {
         return "%H:%M";
       }
 
-      var tooltip = new GraphTooltip(elem, dashboard, scope, function() {
-        return sortedSeries;
-      });
-
       elem.bind("plotselected", function (event, ranges) {
         scope.$apply(function() {
           timeSrv.setTime({

public/app/plugins/panel/graph/graph_tooltip.js

@@ -10,7 +10,7 @@ function ($) {
     var ctrl = scope.ctrl;
     var panel = ctrl.panel;
 
-    var $tooltip = $('<div id="tooltip" class="graph-tooltip">');
+    var $tooltip = $('<div class="graph-tooltip">');
 
     this.destroy = function() {
       $tooltip.remove();
@@ -141,12 +141,32 @@ function ($) {
         }
       }
 
+      if (dashboard.sharedTooltip) {
+        ctrl.publishAppEvent('clearTooltip');
+      }
+
       if (dashboard.sharedCrosshair) {
         ctrl.publishAppEvent('clearCrosshair');
       }
     });
 
     elem.bind("plothover", function (event, pos, item) {
+      if (dashboard.sharedCrosshair) {
+        ctrl.publishAppEvent('setCrosshair', {pos: pos, scope: scope});
+      }
+
+      if (dashboard.sharedTooltip) {
+        pos.panelRelY = (pos.pageY - elem.offset().top) / elem.height();
+        ctrl.publishAppEvent('setTooltip', {pos: pos, scope: scope});
+      }
+      self.setTooltip(pos, item);
+    });
+
+    this.clearTooltip = function() {
+      $tooltip.detach();
+    };
+
+    this.setTooltip = function(pos, item) {
       var plot = elem.data().plot;
       var plotData = plot.getData();
       var xAxes = plot.getXAxes();
@@ -154,8 +174,16 @@ function ($) {
       var seriesList = getSeriesFn();
       var group, value, absoluteTime, hoverInfo, i, series, seriesHtml, tooltipFormat;
 
-      if (dashboard.sharedCrosshair) {
+      // if panelRelY is defined another panel wants us to show a tooltip
-        ctrl.publishAppEvent('setCrosshair', {pos: pos, scope: scope});
+      // get pageX from position on x axis and pageY from relative position in original panel
+      if (pos.panelRelY !== undefined) {
+        var pointOffset = plot.pointOffset({x: pos.x});
+        if (Number.isNaN(pointOffset.left) || pointOffset.left < 0) {
+          $tooltip.detach();
+          return;
+        }
+        pos.pageX = elem.offset().left + pointOffset.left;
+        pos.pageY = elem.offset().top + elem.height() * pos.panelRelY;
       }
 
       if (seriesList.length === 0) {
@@ -238,7 +266,7 @@ function ($) {
       else {
         $tooltip.detach();
       }
-    });
+    };
   }
 
   return GraphTooltip;