Merge branch 'shared_tooltip' of https://github.com/connection-reset/grafana into connection-reset-shared_tooltip

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;
@@ -565,10 +581,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) {
-        ctrl.publishAppEvent('setCrosshair', {pos: pos, scope: scope});
+      // if panelRelY is defined another panel wants us to show a tooltip
+      // 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;