Committed by
Gerrit Code Review
GUI -- Tooltips are aligned correctly based on where the mouse is on the screen.
Change-Id: I0b350cfbb6dec8cad42907e08a4c8c17bf694d73
Showing
1 changed file
with
27 additions
and
6 deletions
... | @@ -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 | } | ... | ... |
-
Please register or login to post a comment