diff --git a/src/renderer/components/fields/Tooltip.test.tsx b/src/renderer/components/fields/Tooltip.test.tsx
index b6b759e8e..b06e5abb0 100644
--- a/src/renderer/components/fields/Tooltip.test.tsx
+++ b/src/renderer/components/fields/Tooltip.test.tsx
@@ -13,18 +13,33 @@ describe('renderer/components/fields/Tooltip.tsx', () => {
it('should render', () => {
renderWithAppContext();
- expect(screen.getByTestId('tooltip-test')).toBeInTheDocument();
+ expect(screen.getByTestId('tooltip-icon-test')).toBeInTheDocument();
+ expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument();
+ });
+
+ it('should toggle (show/hide) tooltip on clicking tooltip icon', async () => {
+ renderWithAppContext();
+
+ const tooltipIconElement = screen.getByTestId('tooltip-icon-test');
+
+ await userEvent.click(tooltipIconElement);
+ expect(screen.queryByText(props.tooltip as string)).toBeInTheDocument();
+
+ await userEvent.click(tooltipIconElement);
+ expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument();
});
- it('should display on mouse enter / leave', async () => {
+ it('should hide tooltip contents on leave', async () => {
renderWithAppContext();
- const tooltipElement = screen.getByTestId('tooltip-test');
+ const tooltipIconElement = screen.getByTestId('tooltip-icon-test');
- await userEvent.hover(tooltipElement);
+ await userEvent.click(tooltipIconElement);
expect(screen.queryByText(props.tooltip as string)).toBeInTheDocument();
- await userEvent.unhover(tooltipElement);
+ const tooltipContentElement = screen.getByTestId('tooltip-content-test');
+
+ await userEvent.unhover(tooltipContentElement);
expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument();
});
});
diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx
index 3312dd468..fc6ed15f0 100644
--- a/src/renderer/components/fields/Tooltip.tsx
+++ b/src/renderer/components/fields/Tooltip.tsx
@@ -21,10 +21,9 @@ export const Tooltip: FC = (props: TooltipProps) => {