Updated scatter.js so that when you mouseover a path-point, it will return all series information in the mouse event dispatch.

Updated nv.models.tooltip with more features.
Updated styling of the tooltip.

src/models/lineChart.js

@@ -49,25 +49,22 @@ nv.models.lineChart = function() {
   //------------------------------------------------------------
 
   var showTooltip = function(e, offsetElement) {
-    var x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
+    var x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex));
-        y = yAxis.tickFormat()(lines.y()(e.point, e.pointIndex))
-        ;
 
     var tip = nv.models.tooltip()
             .position({left: e.pos[0], top: e.pos[1]})
             .chartContainer(offsetElement)
             .fixedTop(30)
-           // .contentGenerator(tooltip)
+            .enabled(tooltips)
+            .valueFormatter(function(d,i) {
+               return yAxis.tickFormat()(d);
+            })
             .data(
                 {
-                  key: e.series.key,
+                  key: "",
                   value: x,
-                  series: [
+                  seriesSelectedKey: e.series.key,
-                    {key: e.series.key,
+                  series: e.allSeriesData
-                    value: y},
-                    {key: 'Series2',
-                     value: y}
-                  ]
                 }
               )
             .render()
@@ -277,7 +274,7 @@ nv.models.lineChart = function() {
 */
 
       dispatch.on('tooltipShow', function(e) {
-        if (tooltips) showTooltip(e, that.parentNode);
+         showTooltip(e, that.parentNode);
       });
 
 

src/models/scatter.js

@@ -243,44 +243,38 @@ nv.models.scatter = function() {
                     return 'M' + d.data.join('L') + 'Z'; 
               });
 
+          var mouseEventCallback = function(d,mDispatch) {
+                if (needsUpdate) return 0;
+                var series = data[d.series],
+                    point  = series.values[d.point];
+
+                var allSeriesData = [];
+                data.forEach(function(item) {
+                    allSeriesData.push({
+                        key: item.key,
+                        value: getY(item.values[d.point], d.point)
+                    });
+                });
+
+                mDispatch({
+                  point: point,
+                  series: series,
+                  pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
+                  seriesIndex: d.series,
+                  pointIndex: d.point,
+                  allSeriesData: allSeriesData
+                });
+          };
+
           pointPaths
               .on('click', function(d) {
-                if (needsUpdate) return 0;
+                mouseEventCallback(d, dispatch.elementClick);
-                var series = data[d.series],
-                    point  = series.values[d.point];
-
-                dispatch.elementClick({
-                  point: point,
-                  series: series,
-                  pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
-                  seriesIndex: d.series,
-                  pointIndex: d.point
-                });
               })
               .on('mouseover', function(d) {
-                if (needsUpdate) return 0;
+                mouseEventCallback(d, dispatch.elementMouseover);
-                var series = data[d.series],
-                    point  = series.values[d.point];
-
-                dispatch.elementMouseover({
-                  point: point,
-                  series: series,
-                  pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
-                  seriesIndex: d.series,
-                  pointIndex: d.point
-                });
               })
               .on('mouseout', function(d, i) {
-                if (needsUpdate) return 0;
+                mouseEventCallback(d, dispatch.elementMouseout);
-                var series = data[d.series],
-                    point  = series.values[d.point];
-
-                dispatch.elementMouseout({
-                  point: point,
-                  series: series,
-                  seriesIndex: d.series,
-                  pointIndex: d.point
-                });
               });
 
 

src/nv.d3.css

@@ -84,6 +84,23 @@
   margin: 2px 0;
 }
 
+.nvtooltip table {
+  margin: 6px;
+}
+
+.nvtooltip table td {
+  padding-right: 6px;
+  padding-bottom: 3px;
+}
+
+.nvtooltip table tr.selected td.key {
+  font-weight: bold;
+}
+.nvtooltip table td.value {
+  text-align: right;
+  font-weight: bold;
+}
+
 .nvtooltip-pending-removal {
   position: absolute;
   pointer-events: none;

src/tooltip.js

@@ -19,6 +19,7 @@
         {
             key: "Date",
             value: "August 2009",
+            seriesSelectedKey: "Series 2", 
             series: [
                     {
                         key: "Series 1",
@@ -39,18 +40,24 @@
         ,   classes = null  //Attaches additional CSS classes to the tooltip DIV that is created.
         ,   chartContainer = null   //Parent container that holds the chart.
         ,   position = {left: null, top: null}      //Relative position of the tooltip inside chartContainer.
+        ,   enabled = true  //True -> tooltips are rendered. False -> don't render tooltips.
         ;
 
+        var valueFormatter = function(d,i) {
+            return d;
+        };
+
         var contentGenerator = function(d) {
             if (content != null) return content;
 
             if (d == null) return '';
 
-            var html = "<table><thead><strong class='x-value'>" + d.value + "</strong></thead><tbody>";
+            var html = "<table><thead><tr><td colspan='2'><strong class='x-value'>" + d.value + "</strong></td></tr></thead><tbody>";
             if (d.series instanceof Array) {
-                d.series.forEach(function(item) {
+                d.series.forEach(function(item, i) {
-                    html += "<tr><td class='key'>" + item.key + ":</td>";
+                    var isSelected = (item.key === d.seriesSelectedKey) ? "selected" : "";
-                    html += "<td class='value'>" + item.value + "</td></tr>"; 
+                    html += "<tr class='" + isSelected + "'><td class='key'>" + item.key + ":</td>";
+                    html += "<td class='value'>" + valueFormatter(item.value,i) + "</td></tr>"; 
                 });
             }
             html += "</tbody></table>";
@@ -75,6 +82,8 @@
 
         //Draw the tooltip onto the DOM.
         nvtooltip.render = function() {
+            if (!enabled) return;
+
             convertViewBoxRatio();
 
             var left = position.left;
@@ -150,6 +159,19 @@
             return nvtooltip;
         };
 
+        nvtooltip.enabled = function(_) {
+            if (!arguments.length) return enabled;
+            enabled = _;
+            return nvtooltip;
+        };
+
+        nvtooltip.valueFormatter = function(_) {
+            if (!arguments.length) return valueFormatter;
+            if (typeof _ === 'function') {
+                valueFormatter = _;
+            }
+            return nvtooltip;
+        };
 
 
         return nvtooltip;