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(
+
+ On the page
+
+ );
+ 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(
+
+ On the page
+
+ );
+ 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(
+
+ On the page
+
+ );
+ 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(
}, [controlledVisible]);
const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible, update } = usePopperTooltip({
- visible: controlledVisible,
+ visible: show ?? controlledVisible,
placement: placement,
interactive: interactive,
delayHide: interactive ? 100 : 0,