From 1cdc139f28c3ff8448c3282f9c9d97848fac4c96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Tue, 27 Jun 2023 13:20:19 +0200
Subject: [PATCH] Grafana UI: Fix behaviour regression on Tooltip component
 (#70682)

---
 .../src/components/Tooltip/Tooltip.test.tsx   | 32 +++++++++++++++++++
 .../src/components/Tooltip/Tooltip.tsx        |  2 +-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
index bfd5b5b77b0..12e7ece46d0 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React, { MutableRefObject } from 'react';
 
 import { Tooltip } from './Tooltip';
@@ -38,4 +39,35 @@ describe('Tooltip', () => {
 
     expect(refObj.current).not.toBeNull();
   });
+  it('to be shown on hover and be dismissable by pressing Esc key when show is undefined', async () => {
+    render(
+      <Tooltip content="Tooltip content">
+        <span>On the page</span>
+      </Tooltip>
+    );
+    await userEvent.hover(screen.getByText('On the page'));
+    expect(await screen.findByText('Tooltip content')).toBeInTheDocument();
+    await userEvent.keyboard('{Escape}');
+    expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument();
+  });
+  it('is always visible when show prop is true', async () => {
+    render(
+      <Tooltip content="Tooltip content" show={true}>
+        <span>On the page</span>
+      </Tooltip>
+    );
+    await userEvent.hover(screen.getByText('On the page'));
+    expect(screen.getByText('Tooltip content')).toBeInTheDocument();
+    await userEvent.unhover(screen.getByText('On the page'));
+    expect(screen.getByText('Tooltip content')).toBeInTheDocument();
+  });
+  it('is never visible when show prop is false', async () => {
+    render(
+      <Tooltip content="Tooltip content" show={false}>
+        <span>On the page</span>
+      </Tooltip>
+    );
+    await userEvent.hover(screen.getByText('On the page'));
+    expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index 4169a1ad8a2..db2b3ff55a0 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
@@ -42,7 +42,7 @@ export const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(
     }, [controlledVisible]);
 
     const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible, update } = usePopperTooltip({
-      visible: controlledVisible,
+      visible: show ?? controlledVisible,
       placement: placement,
       interactive: interactive,
       delayHide: interactive ? 100 : 0,