Customizing hover content using default content (fixes #179).

examples/decimal-custom-hover.html

@@ -27,11 +27,12 @@ window.m = Morris.Line({
   ykeys: ['y'],
   labels: ['sin(x)'],
   parseTime: false,
-  hoverCallback: function (index, options) {
+  hoverCallback: function (index, options, default_content) {
     var row = options.data[index];
-    return "1.5 + 1.5 sin(" + row.x + ") = " + row.y;
+    return default_content.replace("sin(x)", "1.5 + 1.5 sin(" + row.x + ")");
   },
-  xLabelMargin: 10
+  xLabelMargin: 10,
+  integerYLabels: true
 });
 </pre>
 </body>

lib/morris.bar.coffee

@@ -147,9 +147,6 @@ class Morris.Bar extends Morris.Grid
   #
   # @private
   hoverContentForRow: (index) ->
-    if typeof @options.hoverCallback is 'function'
-      content = @options.hoverCallback(index, @options)
-    else
     row = @data[index]
     content = "<div class='morris-hover-row-label'>#{row.label}</div>"
     for y, j in row.y
@@ -159,6 +156,8 @@ class Morris.Bar extends Morris.Grid
           #{@yLabelFormat(y)}
         </div>
       """
+    if typeof @options.hoverCallback is 'function'
+      content = @options.hoverCallback(index, @options, content)
     x = @left + (index + 0.5) * @width / @data.length
     [content, x]
 

lib/morris.line.coffee

@@ -103,9 +103,6 @@ class Morris.Line extends Morris.Grid
   # @private
   hoverContentForRow: (index) ->
     row = @data[index]
-    if typeof @options.hoverCallback is 'function'
-      content = @options.hoverCallback(index, @options)
-    else
     content = "<div class='morris-hover-row-label'>#{row.label}</div>"
     for y, j in row.y
       content += """
@@ -114,6 +111,8 @@ class Morris.Line extends Morris.Grid
           #{@yLabelFormat(y)}
         </div>
       """
+    if typeof @options.hoverCallback is 'function'
+      content = @options.hoverCallback(index, @options, content)
     [content, row._x, row._ymax]
 
 

morris.js

@@ -754,15 +754,14 @@
     Line.prototype.hoverContentForRow = function(index) {
       var content, j, row, y, _i, _len, _ref;
       row = this.data[index];
-      if (typeof this.options.hoverCallback === 'function') {
-        content = this.options.hoverCallback(index, this.options);
-      } else {
       content = "<div class='morris-hover-row-label'>" + row.label + "</div>";
       _ref = row.y;
       for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) {
         y = _ref[j];
         content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n  " + this.options.labels[j] + ":\n  " + (this.yLabelFormat(y)) + "\n</div>";
       }
+      if (typeof this.options.hoverCallback === 'function') {
+        content = this.options.hoverCallback(index, this.options, content);
       }
       return [content, row._x, row._ymax];
     };
@@ -1441,9 +1440,6 @@
 
     Bar.prototype.hoverContentForRow = function(index) {
       var content, j, row, x, y, _i, _len, _ref;
-      if (typeof this.options.hoverCallback === 'function') {
-        content = this.options.hoverCallback(index, this.options);
-      } else {
       row = this.data[index];
       content = "<div class='morris-hover-row-label'>" + row.label + "</div>";
       _ref = row.y;
@@ -1451,6 +1447,8 @@
         y = _ref[j];
         content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n  " + this.options.labels[j] + ":\n  " + (this.yLabelFormat(y)) + "\n</div>";
       }
+      if (typeof this.options.hoverCallback === 'function') {
+        content = this.options.hoverCallback(index, this.options, content);
       }
       x = this.left + (index + 0.5) * this.width / this.data.length;
       return [content, x];