diff --git a/web/app/assets/javascripts/hoverBand.js b/web/app/assets/javascripts/hoverBand.js
index 1c29d25b3..d6498f91a 100644
--- a/web/app/assets/javascripts/hoverBand.js
+++ b/web/app/assets/javascripts/hoverBand.js
@@ -2,14 +2,26 @@
 
   "use strict";
   context.JK = context.JK || {};
-  context.JK.BandHoverBubble = function(bandId, position) {
+  context.JK.BandHoverBubble = function(bandId, x, y) {
 
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
     var hoverSelector = "#band-hover";
 
     this.showBubble = function() {
-      $(hoverSelector).css({left: position.left-100, top: position.top});
+      var mouseLeft = x < (document.body.clientWidth / 2);
+      var mouseTop = y < (document.body.clientHeight / 2);
+      var css = {};
+      if (mouseLeft)
+          css.left = x + 10 + 'px';
+      else
+          css.left = x - (7 + $(hoverSelector).width()) + 'px';
+      if (mouseTop)
+          css.top = y + 10 + 'px';
+      else
+          css.top = y - (7 + $(hoverSelector).height()) + 'px';
+
+      $(hoverSelector).css(css);
       $(hoverSelector).fadeIn(500);
 
       rest.getBand(bandId)
diff --git a/web/app/assets/javascripts/hoverFan.js b/web/app/assets/javascripts/hoverFan.js
index 1aa510721..f5b9926d0 100644
--- a/web/app/assets/javascripts/hoverFan.js
+++ b/web/app/assets/javascripts/hoverFan.js
@@ -2,7 +2,7 @@
 
   "use strict";
   context.JK = context.JK || {};
-  context.JK.FanHoverBubble = function(userId, position) {
+  context.JK.FanHoverBubble = function(userId, x, y) {
 
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
@@ -10,7 +10,19 @@
     var hoverSelector = "#fan-hover";
 
     this.showBubble = function() {
-      $(hoverSelector).css({left: position.left-100, top: position.top});
+      var mouseLeft = x < (document.body.clientWidth / 2);
+      var mouseTop = y < (document.body.clientHeight / 2);
+      var css = {};
+      if (mouseLeft)
+          css.left = x + 10 + 'px';
+      else
+          css.left = x - (7 + $(hoverSelector).width()) + 'px';
+      if (mouseTop)
+          css.top = y + 10 + 'px';
+      else
+          css.top = y - (7 + $(hoverSelector).height()) + 'px';
+
+      $(hoverSelector).css(css);
       $(hoverSelector).fadeIn(500);
 
       rest.getUserDetail({id: userId})
diff --git a/web/app/assets/javascripts/hoverMusician.js b/web/app/assets/javascripts/hoverMusician.js
index e4443a8c4..6ce0368a6 100644
--- a/web/app/assets/javascripts/hoverMusician.js
+++ b/web/app/assets/javascripts/hoverMusician.js
@@ -2,14 +2,27 @@
 
   "use strict";
   context.JK = context.JK || {};
-  context.JK.MusicianHoverBubble = function(userId, position) {
+  context.JK.MusicianHoverBubble = function(userId, x, y) {
 
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
     var hoverSelector = "#musician-hover";
 
     this.showBubble = function() {
-      $(hoverSelector).css({left: position.left-100, top: position.top});
+
+      var mouseLeft = x < (document.body.clientWidth / 2);
+      var mouseTop = y < (document.body.clientHeight / 2);
+      var css = {};
+      if (mouseLeft)
+          css.left = x + 10 + 'px';
+      else
+          css.left = x - (7 + $(hoverSelector).width()) + 'px';
+      if (mouseTop)
+          css.top = y + 10 + 'px';
+      else
+          css.top = y - (7 + $(hoverSelector).height()) + 'px';
+
+      $(hoverSelector).css(css);
       $(hoverSelector).fadeIn(500);
 
       rest.getUserDetail({id: userId})
diff --git a/web/app/assets/javascripts/hoverRecording.js b/web/app/assets/javascripts/hoverRecording.js
index e99d9fedd..20a5b3994 100644
--- a/web/app/assets/javascripts/hoverRecording.js
+++ b/web/app/assets/javascripts/hoverRecording.js
@@ -2,7 +2,7 @@
 
   "use strict";
   context.JK = context.JK || {};
-  context.JK.RecordingHoverBubble = function(recordingId, position) {
+  context.JK.RecordingHoverBubble = function(recordingId, x, y) {
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
     var hoverSelector = "#recording-hover";
@@ -38,7 +38,19 @@
     }
 
     this.showBubble = function() {
-      $(hoverSelector).css({left: position.left-100, top: position.top+20});
+      var mouseLeft = x < (document.body.clientWidth / 2);
+      var mouseTop = y < (document.body.clientHeight / 2);
+      var css = {};
+      if (mouseLeft)
+          css.left = x + 10 + 'px';
+      else
+          css.left = x - (7 + $(hoverSelector).width()) + 'px';
+      if (mouseTop)
+          css.top = y + 10 + 'px';
+      else
+          css.top = y - (7 + $(hoverSelector).height()) + 'px';
+
+      $(hoverSelector).css(css);
       $(hoverSelector).fadeIn(500);
 
       rest.getClaimedRecording(recordingId)
@@ -76,7 +88,7 @@
             claimedRecordingId: claimedRecording.id,
             name: claimedRecording.name,
             genre: claimedRecording.genre_id.toUpperCase(),
-            created_at: context.JK.formatDateTime(recording.created_at),
+            created_at: $.timeago(recording.created_at),
             description: response.description ? response.description : "",
             play_count: recording.play_count,
             comment_count: recording.comment_count,
diff --git a/web/app/assets/javascripts/hoverSession.js b/web/app/assets/javascripts/hoverSession.js
index f9bca235e..f6a9843c5 100644
--- a/web/app/assets/javascripts/hoverSession.js
+++ b/web/app/assets/javascripts/hoverSession.js
@@ -2,14 +2,26 @@
 
   "use strict";
   context.JK = context.JK || {};
-  context.JK.SessionHoverBubble = function(sessionId, position) {
+  context.JK.SessionHoverBubble = function(sessionId, x, y) {
 
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
     var hoverSelector = "#session-hover";
 
     this.showBubble = function() {
-      $(hoverSelector).css({left: position.left-100, top: position.top+10});
+      var mouseLeft = x < (document.body.clientWidth / 2);
+      var mouseTop = y < (document.body.clientHeight / 2);
+      var css = {};
+      if (mouseLeft)
+          css.left = x + 10 + 'px';
+      else
+          css.left = x - (7 + $(hoverSelector).width()) + 'px';
+      if (mouseTop)
+          css.top = y + 10 + 'px';
+      else
+          css.top = y - (7 + $(hoverSelector).height()) + 'px';
+
+      $(hoverSelector).css(css);
       $(hoverSelector).fadeIn(500);
 
       rest.getSessionHistory(sessionId)
@@ -44,7 +56,7 @@
             genre: response.genres.toUpperCase(),
             comment_count: response.comment_count,
             like_count: response.like_count,
-            created_at: context.JK.formatDateTime(response.created_at),
+            created_at: $.timeago(response.created_at),
             musicians: musicianHtml
           });
 
diff --git a/web/app/assets/javascripts/utils.js b/web/app/assets/javascripts/utils.js
index 657ab1ed8..057ffd3f7 100644
--- a/web/app/assets/javascripts/utils.js
+++ b/web/app/assets/javascripts/utils.js
@@ -154,6 +154,8 @@
   }
 
   context.JK.bindHoverEvents = function ($parent) {
+    var timeout = 300;
+    var fadeoutValue = 100;
 
     if (!$parent) {
       $parent = $('body');
@@ -165,75 +167,87 @@
     }
 
     function hideBubble($hoverElement) {
+
       var bubbleSelector = $hoverElement.attr("bubble-id");
+
       $(bubbleSelector).hover(
         function () {
-          // do nothing when entering the bubble (this should never happen)
+          // do nothing when entering the bubble
         },
         function () {
-          $(this).fadeOut(100);
+          $(this).fadeOut(fadeoutValue);
         }
       );
+
+      // first check to see if the user isn't hovering over the hover bubble
+      if (!$(bubbleSelector).is(":hover")) {
+        $(bubbleSelector).fadeOut(fadeoutValue);
+      }
     }
 
     // MUSICIAN
     $("[hoveraction='musician']", $parent).hoverIntent({
-      over: function () {
-        var bubble = new JK.MusicianHoverBubble($(this).attr('user-id'), $(this).offset());
+      over: function(e) {
+        var bubble = new JK.MusicianHoverBubble($(this).attr('user-id'), e.pageX, e.pageY);
         showBubble(bubble, $(this));
       },
       out: function () { // this registers for leaving the hoverable element
         hideBubble($(this));
       },
-      sensitivity: 1
+      sensitivity: 1,
+      timeout: timeout
     });
 
     // FAN
     $("[hoveraction='fan']", $parent).hoverIntent({
-      over: function () {
-        var bubble = new JK.FanHoverBubble($(this).attr('user-id'), $(this).offset());
+      over: function(e) {
+        var bubble = new JK.FanHoverBubble($(this).attr('user-id'), e.pageX, e.pageY);
         showBubble(bubble, $(this));
       },
       out: function () { // this registers for leaving the hoverable element
         hideBubble($(this));
       },
-      sensitivity: 1
+      sensitivity: 1,
+      timeout: timeout
     });
 
     // BAND
     $("[hoveraction='band']", $parent).hoverIntent({
-      over: function () {
-        var bubble = new JK.BandHoverBubble($(this).attr('band-id'), $(this).offset());
+      over: function(e) {
+        var bubble = new JK.BandHoverBubble($(this).attr('band-id'), e.pageX, e.pageY);
         showBubble(bubble, $(this));
       },
       out: function () { // this registers for leaving the hoverable element
         hideBubble($(this));
       },
-      sensitivity: 1
+      sensitivity: 1,
+      timeout: timeout
     });
 
     // SESSION
     $("[hoveraction='session']", $parent).hoverIntent({
-      over: function () {
-        var bubble = new JK.SessionHoverBubble($(this).attr('session-id'), $(this).offset());
+      over: function(e) {
+        var bubble = new JK.SessionHoverBubble($(this).attr('session-id'), e.pageX, e.pageY);
         showBubble(bubble, $(this));
       },
       out: function () { // this registers for leaving the hoverable element
         hideBubble($(this));
       },
-      sensitivity: 1
+      sensitivity: 1,
+      timeout: timeout
     });
 
     // RECORDING
     $("[hoveraction='recording']", $parent).hoverIntent({
-      over: function () {
-        var bubble = new JK.RecordingHoverBubble($(this).attr('recording-id'), $(this).offset());
+      over: function(e) {
+        var bubble = new JK.RecordingHoverBubble($(this).attr('recording-id'), e.pageX, e.pageY);
         showBubble(bubble, $(this));
       },
       out: function () { // this registers for leaving the hoverable element
         hideBubble($(this));
       },
-      sensitivity: 1
+      sensitivity: 1,
+      timeout: timeout
     });
   }