expose some Morris.Hover options also make absolute position possible

examples/days.html

@@ -31,7 +31,10 @@ Morris.Line({
   data: day_data,
   xkey: 'period',
   ykeys: ['licensed', 'sorned'],
-  labels: ['Licensed', 'SORN']
+  labels: ['Licensed', 'SORN'],
+  hoverOptions: {
+    position: 'absolute right'
+  }
 });
 </pre>
 </body>

lib/morris.bar.coffee

@@ -7,7 +7,7 @@ class Morris.Bar extends Morris.Grid
     @cumulative = @options.stacked
 
     if @options.hideHover isnt 'always'
-      @hover = new Morris.Hover(parent: @el)
+      @hover = new Morris.Hover $.extend({}, @options.hoverOptions, parent: @el)
       @on('hovermove', @onHoverMove)
       @on('hoverout', @onHoverOut)
 
@@ -26,6 +26,7 @@ class Morris.Bar extends Morris.Grid
       '#9440ed'
     ]
     xLabelMargin: 50
+    hoverOptions: {}
 
   # Do any size-related calculations
   #

lib/morris.hover.coffee

@@ -2,14 +2,25 @@ class Morris.Hover
   # Displays contextual information in a floating HTML div.
 
   @defaults:
-    class: 'morris-hover morris-default-style'
+    cssPrefix: 'morris'
+    position: 'auto'
+    class: ['-hover', '-default-style']
 
   constructor: (options = {}) ->
     @options = $.extend {}, Morris.Hover.defaults, options
-    @el = $ "<div class='#{@options.class}'></div>"
+    @el = $ "<div class='#{@buildClassAttr(@options.class)}'></div>"
     @el.hide()
     @options.parent.append(@el)
 
+  buildClassAttr: (c) ->
+    if typeof c is 'string'
+      c = [c]
+    classes = []
+    for class_ in c
+      classes.push(if class_.indexOf('-') is 0 then @options.cssPrefix + class_ else class_)
+    classes.join ' '
+
+
   update: (html, x, y) ->
     @html(html)
     @show()
@@ -19,10 +30,31 @@ class Morris.Hover
     @el.html(content)
 
   moveTo: (x, y) ->
+    p = @options.cssPrefix
+    @el.removeClass "#{p}-hover-below #{p}-hover-above #{p}-hover-left #{p}-hover-right"
+
     parentWidth  = @options.parent.innerWidth()
     parentHeight = @options.parent.innerHeight()
     hoverWidth   = @el.outerWidth()
     hoverHeight  = @el.outerHeight()
+
+    if @options.position in ['absolute', 'absolute above']
+      left = x - hoverWidth / 2
+      top = y - hoverHeight - 10
+      @el.addClass "#{p}-hover-above"
+    else if @options.position is 'absolute below'
+      left = x - hoverWidth / 2
+      top = y + 10
+      @el.addClass "#{p}-hover-below"
+    else if @options.position is 'absolute left'
+      left = x - hoverWidth - 10
+      top = y - hoverHeight / 2
+      @el.addClass "#{p}-hover-left"
+    else if @options.position is 'absolute right'
+      left = x + 10
+      top = y - hoverHeight / 2
+      @el.addClass "#{p}-hover-right"
+    else
       left = Math.min(Math.max(0, x - hoverWidth / 2), parentWidth - hoverWidth)
       if y?
         top = y - hoverHeight - 10
@@ -30,6 +62,10 @@ class Morris.Hover
           top = y + 10
           if top + hoverHeight > parentHeight
             top = parentHeight / 2 - hoverHeight / 2
+          else
+            @el.addClass "#{p}-hover-below"
+        else
+          @el.addClass "#{p}-hover-above"
       else
         top = parentHeight / 2 - hoverHeight / 2
     @el.css(left: left + "px", top: top + "px")

lib/morris.line.coffee

@@ -11,7 +11,7 @@ class Morris.Line extends Morris.Grid
     @pointShrink = Raphael.animation r: @options.pointSize, 25, 'linear'
 
     if @options.hideHover isnt 'always'
-      @hover = new Morris.Hover(parent: @el)
+      @hover = new Morris.Hover $.extend({}, @options.hoverOptions, parent: @el)
       @on('hovermove', @onHoverMove)
       @on('hoverout', @onHoverOut)
 
@@ -37,7 +37,7 @@ class Morris.Line extends Morris.Grid
     xLabelFormat: null
     xLabelMargin: 50
     continuousLine: true
-    hideHover: false
+    hoverOptions: {}
 
   # Do any size-related calculations
   #

morris.js

@@ -474,7 +474,9 @@
   Morris.Hover = (function() {
 
     Hover.defaults = {
-      "class": 'morris-hover morris-default-style'
+      cssPrefix: 'morris',
+      position: 'auto',
+      "class": ['-hover', '-default-style']
     };
 
     function Hover(options) {
@@ -482,11 +484,24 @@
         options = {};
       }
       this.options = $.extend({}, Morris.Hover.defaults, options);
-      this.el = $("<div class='" + this.options["class"] + "'></div>");
+      this.el = $("<div class='" + (this.buildClassAttr(this.options["class"])) + "'></div>");
       this.el.hide();
       this.options.parent.append(this.el);
     }
 
+    Hover.prototype.buildClassAttr = function(c) {
+      var class_, classes, _i, _len;
+      if (typeof c === 'string') {
+        c = [c];
+      }
+      classes = [];
+      for (_i = 0, _len = c.length; _i < _len; _i++) {
+        class_ = c[_i];
+        classes.push(class_.indexOf('-') === 0 ? this.options.cssPrefix + class_ : class_);
+      }
+      return classes.join(' ');
+    };
+
     Hover.prototype.update = function(html, x, y) {
       this.html(html);
       this.show();
@@ -498,11 +513,30 @@
     };
 
     Hover.prototype.moveTo = function(x, y) {
-      var hoverHeight, hoverWidth, left, parentHeight, parentWidth, top;
+      var hoverHeight, hoverWidth, left, p, parentHeight, parentWidth, top, _ref;
+      p = this.options.cssPrefix;
+      this.el.removeClass("" + p + "-hover-below " + p + "-hover-above " + p + "-hover-left " + p + "-hover-right");
       parentWidth = this.options.parent.innerWidth();
       parentHeight = this.options.parent.innerHeight();
       hoverWidth = this.el.outerWidth();
       hoverHeight = this.el.outerHeight();
+      if ((_ref = this.options.position) === 'absolute' || _ref === 'absolute above') {
+        left = x - hoverWidth / 2;
+        top = y - hoverHeight - 10;
+        this.el.addClass("" + p + "-hover-above");
+      } else if (this.options.position === 'absolute below') {
+        left = x - hoverWidth / 2;
+        top = y + 10;
+        this.el.addClass("" + p + "-hover-below");
+      } else if (this.options.position === 'absolute left') {
+        left = x - hoverWidth - 10;
+        top = y - hoverHeight / 2;
+        this.el.addClass("" + p + "-hover-left");
+      } else if (this.options.position === 'absolute right') {
+        left = x + 10;
+        top = y - hoverHeight / 2;
+        this.el.addClass("" + p + "-hover-right");
+      } else {
         left = Math.min(Math.max(0, x - hoverWidth / 2), parentWidth - hoverWidth);
         if (y != null) {
           top = y - hoverHeight - 10;
@@ -510,11 +544,16 @@
             top = y + 10;
             if (top + hoverHeight > parentHeight) {
               top = parentHeight / 2 - hoverHeight / 2;
+            } else {
+              this.el.addClass("" + p + "-hover-below");
             }
+          } else {
+            this.el.addClass("" + p + "-hover-above");
           }
         } else {
           top = parentHeight / 2 - hoverHeight / 2;
         }
+      }
       return this.el.css({
         left: left + "px",
         top: top + "px"
@@ -557,9 +596,9 @@
         r: this.options.pointSize
       }, 25, 'linear');
       if (this.options.hideHover !== 'always') {
-        this.hover = new Morris.Hover({
+        this.hover = new Morris.Hover($.extend({}, this.options.hoverOptions, {
           parent: this.el
-        });
+        }));
         this.on('hovermove', this.onHoverMove);
         return this.on('hoverout', this.onHoverOut);
       }
@@ -577,7 +616,7 @@
       xLabelFormat: null,
       xLabelMargin: 50,
       continuousLine: true,
-      hideHover: false
+      hoverOptions: {}
     };
 
     Line.prototype.calc = function() {
@@ -1121,9 +1160,9 @@
     Bar.prototype.init = function() {
       this.cumulative = this.options.stacked;
       if (this.options.hideHover !== 'always') {
-        this.hover = new Morris.Hover({
+        this.hover = new Morris.Hover($.extend({}, this.options.hoverOptions, {
           parent: this.el
-        });
+        }));
         this.on('hovermove', this.onHoverMove);
         return this.on('hoverout', this.onHoverOut);
       }
@@ -1133,7 +1172,8 @@
       barSizeRatio: 0.75,
       barGap: 3,
       barColors: ['#0b62a4', '#7a92a3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'],
-      xLabelMargin: 50
+      xLabelMargin: 50,
+      hoverOptions: {}
     };
 
     Bar.prototype.calc = function() {