Fix tooltips on dashboards

frontend/src/card/card.charting.js

@@ -384,14 +384,13 @@ function applyChartColors(dcjsChart, card) {
     return dcjsChart.ordinalColors(uniqueColors);
 }
 
-function applyChartTooltips(dcjsChart, card, cols) {
+function applyChartTooltips(dcjsChart, id, card, cols) {
     dcjsChart.on('renderlet', function(chart) {
         // Remove old tooltips which are sometimes not removed due to chart being rerendered while tip is visible
-        // We should only ever have one tooltip on screen, right?
-        Array.prototype.forEach.call(document.querySelectorAll('.ChartTooltip'), (t) => t.parentNode.removeChild(t));
+        Array.prototype.forEach.call(document.querySelectorAll('.ChartTooltip--'+id), (t) => t.parentNode.removeChild(t));
 
         var tip = d3.tip()
-            .attr('class', 'ChartTooltip')
+            .attr('class', 'ChartTooltip ChartTooltip--'+id)
             .direction('n')
             .offset([-10, 0])
             .html(function(d) {
@@ -409,7 +408,7 @@ function applyChartTooltips(dcjsChart, card, cols) {
             .on('mouseover.tip', function(slice) {
                 tip.show.apply(tip, arguments);
                 if (card.display === "pie") {
-                    var tooltip = d3.select('.ChartTooltip');
+                    var tooltip = d3.select('.ChartTooltip--'+id);
                     let tooltipOffset = getTooltipOffset(tooltip);
                     let sliceCentroid = getPieSliceCentroid(this, slice);
                     tooltip.style({
@@ -845,7 +844,7 @@ export var CardRenderer = {
             // disables ability to select slices
             chart.filter = function() {};
 
-        applyChartTooltips(chart, card, result.cols);
+        applyChartTooltips(chart, id, card, result.cols);
 
         chart.render();
     },
@@ -908,7 +907,7 @@ export var CardRenderer = {
         // TODO: if we are multi-series this could be split axis
         applyChartYAxis(chart, card, result.cols, data, MIN_PIXELS_PER_TICK.y);
 
-        applyChartTooltips(chart, card, result.cols);
+        applyChartTooltips(chart, id, card, result.cols);
         applyChartColors(chart, card);
 
         // if the chart supports 'brushing' (brush-based range filter), disable this since it intercepts mouse hovers which means we can't see tooltips
@@ -985,7 +984,7 @@ export var CardRenderer = {
         // TODO: if we are multi-series this could be split axis
         applyChartYAxis(chart, card, result.cols, data, MIN_PIXELS_PER_TICK.y);
 
-        applyChartTooltips(chart, card, result.cols);
+        applyChartTooltips(chart, id, card, result.cols);
         applyChartColors(chart, card);
 
         // if the chart supports 'brushing' (brush-based range filter), disable this since it intercepts mouse hovers which means we can't see tooltips