improves tooltip positioning

grafana · Sep 9, 2021 · 133b35b · 133b35b
1 parent 63e5bef
commit 133b35b
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx b/webapp/javascript/components/FlameGraph/FlameGraphComponent/index.jsx
@@ -481,13 +481,16 @@ class FlameGraph extends React.Component {
     highlightEl.style.height = `${PX_PER_LEVEL}px`;
 
     tooltipEl.style.opacity = 1;
-    tooltipEl.style.left = `${e.clientX + 12}px`;
-    tooltipEl.style.top = `${e.clientY + 12}px`;
 
     tooltipEl.children[0].innerText = tooltipTitle;
     tooltipEl.children[1].children[0].innerText = tooltipText;
     tooltipEl.children[1].children[1].innerText = tooltipDiffText;
     tooltipEl.children[1].children[1].style.color = tooltipDiffColor;
+
+    // makes it so that tooltip is always visible even if mouse is close to the right edge
+    const tooltipX = Math.min(e.clientX + 12, window.innerWidth - tooltipEl.clientWidth - 20);
+    tooltipEl.style.left = `${tooltipX}px`;
+    tooltipEl.style.top = `${e.clientY + 20}px`;
   };
 
   mouseOutHandler = () => {