fix(tooltip): change show/hide behavior to work with links in description (#2501)

fix(tooltip): change show/hide behavior to work with embedded contents

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/fields/Tooltip.test.tsx

@@ -13,18 +13,33 @@ describe('renderer/components/fields/Tooltip.tsx', () => {
   it('should render', () => {
     renderWithAppContext(<Tooltip {...props} />);
 
-    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(<Tooltip {...props} />);
+
+    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(<Tooltip {...props} />);
 
-    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();
   });
 });

src/renderer/components/fields/Tooltip.tsx

@@ -21,10 +21,9 @@ export const Tooltip: FC<TooltipProps> = (props: TooltipProps) => {
         <button
           {...anchorProps}
           aria-label={props.name}
-          data-testid={`tooltip-${props.name}`}
+          data-testid={`tooltip-icon-${props.name}`}
           id={props.name}
-          onMouseEnter={() => setShowTooltip(true)}
-          onMouseLeave={() => setShowTooltip(false)}
+          onClick={() => setShowTooltip(!showTooltip)}
           type="button"
         >
           <QuestionIcon className="text-gitify-tooltip-icon" />
@@ -38,6 +37,9 @@ export const Tooltip: FC<TooltipProps> = (props: TooltipProps) => {
           'text-left text-xs text-gitify-font',
           'rounded-sm border border-gray-300 shadow-sm bg-gitify-tooltip-popout',
         )}
+        data-testid={`tooltip-content-${props.name}`}
+        onMouseLeave={() => setShowTooltip(false)}
+        role="tooltip"
       >
         {props.tooltip}
       </div>