Flamegraph: Prevent cropping of tooltip by bottom of the viewport (#70633)

public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx

@@ -165,13 +165,23 @@ const FlameGraph = ({
           );
 
           if (barIndex !== -1 && !isNaN(levelIndex) && !isNaN(barIndex)) {
-            tooltipRef.current.style.top = e.clientY + 'px';
-            if (document.documentElement.clientWidth - e.clientX < 400) {
-              tooltipRef.current.style.right = document.documentElement.clientWidth - e.clientX + 15 + 'px';
-              tooltipRef.current.style.left = 'auto';
+            // tooltip has a set number of lines of text so 200 should be good enough (with some buffer) without going
+            // into measuring rendered sizes
+            if (e.clientY < document.documentElement.clientHeight - 200) {
+              tooltipRef.current.style.top = e.clientY + 'px';
+              tooltipRef.current.style.bottom = 'auto';
             } else {
+              tooltipRef.current.style.bottom = document.documentElement.clientHeight - e.clientY + 'px';
+              tooltipRef.current.style.top = 'auto';
+            }
+
+            // 400 is max width of the tooltip
+            if (e.clientX < document.documentElement.clientWidth - 400) {
               tooltipRef.current.style.left = e.clientX + 15 + 'px';
               tooltipRef.current.style.right = 'auto';
+            } else {
+              tooltipRef.current.style.right = document.documentElement.clientWidth - e.clientX + 15 + 'px';
+              tooltipRef.current.style.left = 'auto';
             }
 
             setTooltipItem(levels[levelIndex][barIndex]);

public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraphTooltip.tsx

@@ -90,6 +90,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   tooltip: css`
     title: tooltip;
     position: fixed;
+    z-index: ${theme.zIndex.tooltip};
   `,
   tooltipContent: css`
     title: tooltipContent;
@@ -101,7 +102,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     font-size: ${theme.typography.bodySmall.fontSize};
     padding: ${theme.spacing(0.5, 1)};
     transition: opacity 0.3s;
-    z-index: ${theme.zIndex.tooltip};
     max-width: 400px;
     overflow-wrap: break-word;
   `,

public/app/plugins/panel/flamegraph/flamegraphV2/components/FlameGraph/FlameGraph.tsx

@@ -143,13 +143,23 @@ const FlameGraph = ({
         );
 
         if (barIndex !== -1 && !isNaN(levelIndex) && !isNaN(barIndex)) {
-          tooltipRef.current.style.top = e.clientY + 'px';
-          if (document.documentElement.clientWidth - e.clientX < 400) {
-            tooltipRef.current.style.right = document.documentElement.clientWidth - e.clientX + 15 + 'px';
-            tooltipRef.current.style.left = 'auto';
+          // tooltip has a set number of lines of text so 200 should be good enough (with some buffer) without going
+          // into measuring rendered sizes
+          if (e.clientY < document.documentElement.clientHeight - 200) {
+            tooltipRef.current.style.top = e.clientY + 'px';
+            tooltipRef.current.style.bottom = 'auto';
           } else {
+            tooltipRef.current.style.bottom = document.documentElement.clientHeight - e.clientY + 'px';
+            tooltipRef.current.style.top = 'auto';
+          }
+
+          // 400 is max width of the tooltip
+          if (e.clientX < document.documentElement.clientWidth - 400) {
             tooltipRef.current.style.left = e.clientX + 15 + 'px';
             tooltipRef.current.style.right = 'auto';
+          } else {
+            tooltipRef.current.style.right = document.documentElement.clientWidth - e.clientX + 15 + 'px';
+            tooltipRef.current.style.left = 'auto';
           }
 
           setTooltipItem(levels[levelIndex][barIndex]);

public/app/plugins/panel/flamegraph/flamegraphV2/components/FlameGraph/FlameGraphTooltip.tsx

@@ -90,6 +90,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   tooltip: css`
     title: tooltip;
     position: fixed;
+    z-index: ${theme.zIndex.tooltip};
   `,
   tooltipContent: css`
     title: tooltipContent;
@@ -101,7 +102,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     font-size: ${theme.typography.bodySmall.fontSize};
     padding: ${theme.spacing(0.5, 1)};
     transition: opacity 0.3s;
-    z-index: ${theme.zIndex.tooltip};
     max-width: 400px;
     overflow-wrap: break-word;
   `,