From 77f7e8b84ed9eeb11a6165491f2453826baad02d Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 12 May 2023 09:50:08 +0100
Subject: [PATCH] [v10.0.x] Flamegraph: Fix tooltip positioning (#68312)

Flamegraph: Fix tooltip positioning (#67938)

(cherry picked from commit 37de4a825b96f7b71366ad3b30fcaa09263868fd)

Co-authored-by: Andrej Ocenas <mr.ocenas@gmail.com>
---
 .../components/FlameGraph/FlameGraph.tsx      |  9 +++-
 .../FlameGraph/FlameGraphTooltip.tsx          | 54 +++++++++++--------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx b/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx
index dd450a5b2f3..61da4958353 100644
--- a/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx
+++ b/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx
@@ -161,8 +161,15 @@ const FlameGraph = ({
           );
 
           if (barIndex !== -1 && !isNaN(levelIndex) && !isNaN(barIndex)) {
-            tooltipRef.current.style.left = e.clientX + 10 + 'px';
             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';
+            } else {
+              tooltipRef.current.style.left = e.clientX + 15 + 'px';
+              tooltipRef.current.style.right = 'auto';
+            }
+
             setTooltipItem(levels[levelIndex][barIndex]);
           }
         }
diff --git a/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraphTooltip.tsx b/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraphTooltip.tsx
index 55811867d10..55f3f8cce3a 100644
--- a/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraphTooltip.tsx
+++ b/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraphTooltip.tsx
@@ -1,7 +1,8 @@
 import { css } from '@emotion/css';
 import React, { LegacyRef } from 'react';
 
-import { useStyles2, Tooltip } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
 
 import { FlameGraphDataContainer, LevelItem } from './dataTransform';
 
@@ -19,26 +20,18 @@ const FlameGraphTooltip = ({ data, tooltipRef, item, totalTicks }: Props) => {
   if (item) {
     const tooltipData = getTooltipData(data, item, totalTicks);
     content = (
-      <Tooltip
-        content={
-          <div>
-            <p>{data.getLabel(item.itemIndex)}</p>
-            <p className={styles.lastParagraph}>
-              {tooltipData.unitTitle}
-              <br />
-              Total: <b>{tooltipData.unitValue}</b> ({tooltipData.percentValue}%)
-              <br />
-              Self: <b>{tooltipData.unitSelf}</b> ({tooltipData.percentSelf}%)
-              <br />
-              Samples: <b>{tooltipData.samples}</b>
-            </p>
-          </div>
-        }
-        placement={'right'}
-        show={true}
-      >
-        <span></span>
-      </Tooltip>
+      <div className={styles.tooltipContent}>
+        <p>{data.getLabel(item.itemIndex)}</p>
+        <p className={styles.lastParagraph}>
+          {tooltipData.unitTitle}
+          <br />
+          Total: <b>{tooltipData.unitValue}</b> ({tooltipData.percentValue}%)
+          <br />
+          Self: <b>{tooltipData.unitSelf}</b> ({tooltipData.percentSelf}%)
+          <br />
+          Samples: <b>{tooltipData.samples}</b>
+        </p>
+      </div>
     );
   }
 
@@ -93,14 +86,31 @@ export const getTooltipData = (data: FlameGraphDataContainer, item: LevelItem, t
   };
 };
 
-const getStyles = () => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   tooltip: css`
+    title: tooltip;
     position: fixed;
   `,
+  tooltipContent: css`
+    title: tooltipContent;
+    background-color: ${theme.components.tooltip.background};
+    border-radius: ${theme.shape.radius.default};
+    border: 1px solid ${theme.components.tooltip.background};
+    box-shadow: ${theme.shadows.z2};
+    color: ${theme.components.tooltip.text};
+    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;
+  `,
   lastParagraph: css`
+    title: lastParagraph;
     margin-bottom: 0;
   `,
   name: css`
+    title: name;
     margin-bottom: 10px;
   `,
 });