diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
index 95d01c7f2fe..d318be466e6 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
@@ -1,18 +1,16 @@
import React from 'react';
-import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
import { Tooltip } from './Tooltip';
describe('Tooltip', () => {
it('renders correctly', () => {
- const tree = renderer
- .create(
-
-
- Link with tooltip
-
-
- )
- .toJSON();
- expect(tree).toMatchSnapshot();
+ render(
+
+
+ Link with tooltip
+
+
+ );
+ expect(screen.getByText('Link with tooltip')).toBeInTheDocument();
});
});
diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index 37a94d7767b..3b33660dc1e 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
@@ -16,6 +16,19 @@ export type PopoverContent = string | React.ReactElement | ((props: Popover
export const Tooltip: FC = React.memo(({ children, theme, ...controllerProps }: TooltipProps) => {
const tooltipTriggerRef = createRef();
const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : '');
+ const closePopover = (event: React.KeyboardEvent, hidePopper: () => void) => {
+ if (event.key === 'Tab' || event.altKey || event.ctrlKey || event.metaKey) {
+ return;
+ }
+
+ event.stopPropagation();
+
+ if (event.key === 'Escape') {
+ hidePopper();
+ }
+
+ return;
+ };
return (
@@ -46,6 +59,9 @@ export const Tooltip: FC = React.memo(({ children, theme, ...contr
ref: tooltipTriggerRef,
onMouseEnter: showPopper,
onMouseLeave: hidePopper,
+ onKeyDown: (event: React.KeyboardEvent) => closePopover(event, hidePopper),
+ onFocus: showPopper,
+ onBlur: hidePopper,
})}
>
);
diff --git a/packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
deleted file mode 100644
index 761221906d4..00000000000
--- a/packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tooltip renders correctly 1`] = `
-
- Link with tooltip
-
-`;