GUI -- Tooltips are aligned correctly based on where the mouse is on the screen.

Change-Id: I0b350cfbb6dec8cad42907e08a4c8c17bf694d73

@@ -32,11 +32,35 @@
     // internal state
     // internal state
     var tooltip, currElemId;
     var tooltip, currElemId;
 
 
+    // === Helper functions ---------------------------------------------
+
     function init() {
     function init() {
         tooltip = d3.select('#tooltip');
         tooltip = d3.select('#tooltip');
         tooltip.html('');
         tooltip.html('');
     }
     }
 
 
+    function tipStyle(mouseX, mouseY) {
+        var winWidth = fs.windowSize().width,
+            winHeight = fs.windowSize().height,
+            style = {
+                display: 'inline-block'
+            };
+
+        if (mouseX <= (winWidth / 2)) {
+            style.left = mouseX + 'px';
+        } else {
+            style.right = (winWidth - mouseX) + 'px';
+        }
+
+        if (mouseY <= (winHeight / 2)) {
+            style.top = (mouseY + (hoverHeight - 10)) + 'px';
+        } else {
+            style.top = (mouseY - hoverHeight) + 'px';
+        }
+
+        return style;
+    }
+
     // === API functions ------------------------------------------------
     // === API functions ------------------------------------------------
 
 
     function showTooltip(el, msg) {
     function showTooltip(el, msg) {
@@ -45,7 +69,8 @@
         }
         }
         var elem = d3.select(el),
         var elem = d3.select(el),
             mouseX = d3.event.pageX,
             mouseX = d3.event.pageX,
-            mouseY = d3.event.pageY;
+            mouseY = d3.event.pageY,
+            style = tipStyle(mouseX, mouseY);
         currElemId = elem.attr('id');
         currElemId = elem.attr('id');
 
 
         tooltip.transition()
         tooltip.transition()
@@ -54,11 +79,7 @@
                 d3.select(this).style('display', 'none');
                 d3.select(this).style('display', 'none');
             })
             })
             .each('end', function () {
             .each('end', function () {
-                d3.select(this).style({
-                    display: 'inline-block',
-                    left: mouseX + 'px',
-                    top: (mouseY - hoverHeight) + 'px'
-                })
+                d3.select(this).style(style)
                     .text(msg);
                     .text(msg);
             });
             });
     }
     }