GUI -- Tooltips are aligned correctly based on where the mouse is on the screen.
Change-Id: I0b350cfbb6dec8cad42907e08a4c8c17bf694d73
diff --git a/web/gui/src/main/webapp/app/fw/widget/tooltip.js b/web/gui/src/main/webapp/app/fw/widget/tooltip.js
index b558b27..9c356eb 100644
--- a/web/gui/src/main/webapp/app/fw/widget/tooltip.js
+++ b/web/gui/src/main/webapp/app/fw/widget/tooltip.js
@@ -32,11 +32,35 @@
// internal state
var tooltip, currElemId;
+ // === Helper functions ---------------------------------------------
+
function init() {
tooltip = d3.select('#tooltip');
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 ------------------------------------------------
function showTooltip(el, msg) {
@@ -45,7 +69,8 @@
}
var elem = d3.select(el),
mouseX = d3.event.pageX,
- mouseY = d3.event.pageY;
+ mouseY = d3.event.pageY,
+ style = tipStyle(mouseX, mouseY);
currElemId = elem.attr('id');
tooltip.transition()
@@ -54,11 +79,7 @@
d3.select(this).style('display', 'none');
})
.each('end', function () {
- d3.select(this).style({
- display: 'inline-block',
- left: mouseX + 'px',
- top: (mouseY - hoverHeight) + 'px'
- })
+ d3.select(this).style(style)
.text(msg);
});
}