Tooltip: Fixes tooltip positioning when using lazy content (#77676)

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',

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,