Bri Prebilic Cole
Committed by Gerrit Code Review

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

Change-Id: I0b350cfbb6dec8cad42907e08a4c8c17bf694d73
...@@ -32,11 +32,35 @@ ...@@ -32,11 +32,35 @@
32 // internal state 32 // internal state
33 var tooltip, currElemId; 33 var tooltip, currElemId;
34 34
35 + // === Helper functions ---------------------------------------------
36 +
35 function init() { 37 function init() {
36 tooltip = d3.select('#tooltip'); 38 tooltip = d3.select('#tooltip');
37 tooltip.html(''); 39 tooltip.html('');
38 } 40 }
39 41
42 + function tipStyle(mouseX, mouseY) {
43 + var winWidth = fs.windowSize().width,
44 + winHeight = fs.windowSize().height,
45 + style = {
46 + display: 'inline-block'
47 + };
48 +
49 + if (mouseX <= (winWidth / 2)) {
50 + style.left = mouseX + 'px';
51 + } else {
52 + style.right = (winWidth - mouseX) + 'px';
53 + }
54 +
55 + if (mouseY <= (winHeight / 2)) {
56 + style.top = (mouseY + (hoverHeight - 10)) + 'px';
57 + } else {
58 + style.top = (mouseY - hoverHeight) + 'px';
59 + }
60 +
61 + return style;
62 + }
63 +
40 // === API functions ------------------------------------------------ 64 // === API functions ------------------------------------------------
41 65
42 function showTooltip(el, msg) { 66 function showTooltip(el, msg) {
...@@ -45,7 +69,8 @@ ...@@ -45,7 +69,8 @@
45 } 69 }
46 var elem = d3.select(el), 70 var elem = d3.select(el),
47 mouseX = d3.event.pageX, 71 mouseX = d3.event.pageX,
48 - mouseY = d3.event.pageY; 72 + mouseY = d3.event.pageY,
73 + style = tipStyle(mouseX, mouseY);
49 currElemId = elem.attr('id'); 74 currElemId = elem.attr('id');
50 75
51 tooltip.transition() 76 tooltip.transition()
...@@ -54,11 +79,7 @@ ...@@ -54,11 +79,7 @@
54 d3.select(this).style('display', 'none'); 79 d3.select(this).style('display', 'none');
55 }) 80 })
56 .each('end', function () { 81 .each('end', function () {
57 - d3.select(this).style({ 82 + d3.select(this).style(style)
58 - display: 'inline-block',
59 - left: mouseX + 'px',
60 - top: (mouseY - hoverHeight) + 'px'
61 - })
62 .text(msg); 83 .text(msg);
63 }); 84 });
64 } 85 }
......