From 63c7a0e8ca08b935a2b285b94fd02fb7b0f5035e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 7 Nov 2023 07:00:07 +0100
Subject: [PATCH] Tooltip: Fixes tooltip positioning when using lazy content
 (#77676)

---
 .../src/components/Tooltip/Tooltip.story.tsx   | 18 ++++++++++++++++++
 .../src/components/Tooltip/Tooltip.tsx         | 14 +++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.story.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.story.tsx
index 67ed60768ad..23f66282e90 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.story.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.story.tsx
@@ -2,6 +2,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { Button } from '../Button';
+import { Stack } from '../Layout/Stack/Stack';
 import mdx from '../Tooltip/Tooltip.mdx';
 
 import { Tooltip } from './Tooltip';
@@ -62,6 +63,23 @@ export const Basic: StoryFn<typeof Tooltip> = ({ content, ...args }) => {
   );
 };
 
+export const OverflowViewport: StoryFn<typeof Tooltip> = ({}) => {
+  const content = () => <div>A really long tooltip that will overflow the viewport.</div>;
+
+  return (
+    <Stack justifyContent={'flex-end'}>
+      <Stack direction="column" alignItems={'flex-end'}>
+        <Tooltip content="Static string tooltip" placement="bottom">
+          <Button>Static string tooltip</Button>
+        </Tooltip>
+        <Tooltip content={content} placement="bottom">
+          <Button>Lazy content defined in a function</Button>
+        </Tooltip>
+      </Stack>
+    </Stack>
+  );
+};
+
 Basic.args = {
   content: 'This is a tooltip',
   theme: 'info',
diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index 0b881601f84..b3060829095 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
@@ -53,6 +53,18 @@ export const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(
       onVisibleChange: setControlledVisible,
     });
 
+    const contentIsFunction = typeof content === 'function';
+
+    /**
+     * If content is a function we need to call popper update function to make sure the tooltip is positioned correctly
+     * if it's close to the viewport boundary
+     **/
+    useEffect(() => {
+      if (update && contentIsFunction) {
+        update();
+      }
+    }, [visible, update, contentIsFunction]);
+
     const styles = useStyles2(getStyles);
     const style = styles[theme ?? 'info'];
 
@@ -91,7 +103,7 @@ export const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(
               <div {...getArrowProps({ className: style.arrow })} />
               {typeof content === 'string' && content}
               {React.isValidElement(content) && React.cloneElement(content)}
-              {typeof content === 'function' &&
+              {contentIsFunction &&
                 update &&
                 content({
                   updatePopperPosition: update,