feat(settings): improve tooltips

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

@@ -1,6 +1,10 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { BaseStyles, ThemeProvider } from '@primer/react';
+
+import { mockSettings } from '../../__mocks__/state-mocks';
+import { AppContext } from '../../context/App';
 import { type ITooltip, Tooltip } from './Tooltip';
 
 describe('renderer/components/fields/Tooltip.tsx', () => {
@@ -10,19 +14,44 @@ describe('renderer/components/fields/Tooltip.tsx', () => {
   };
 
   it('should render', () => {
-    const tree = render(<Tooltip {...props} />);
-    expect(tree).toMatchSnapshot();
+    render(
+      <ThemeProvider>
+        <BaseStyles>
+          <AppContext.Provider
+            value={{
+              settings: mockSettings,
+            }}
+          >
+            <Tooltip {...props} />
+          </AppContext.Provider>
+        </BaseStyles>
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByTestId('tooltip-test')).toBeInTheDocument();
   });
 
   it('should display on mouse enter / leave', async () => {
-    render(<Tooltip {...props} />);
+    render(
+      <ThemeProvider>
+        <BaseStyles>
+          <AppContext.Provider
+            value={{
+              settings: mockSettings,
+            }}
+          >
+            <Tooltip {...props} />
+          </AppContext.Provider>
+        </BaseStyles>
+      </ThemeProvider>,
+    );
 
     const tooltipElement = screen.getByTestId('tooltip-test');
 
     await userEvent.hover(tooltipElement);
-    expect(tooltipElement).toMatchSnapshot();
+    expect(screen.queryByText(props.tooltip as string)).toBeInTheDocument();
 
     await userEvent.unhover(tooltipElement);
-    expect(tooltipElement).toMatchSnapshot();
+    expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument();
   });
 });

src/renderer/components/fields/Tooltip.tsx

@@ -1,6 +1,7 @@
 import { type FC, type ReactNode, useState } from 'react';
 
 import { QuestionIcon } from '@primer/octicons-react';
+import { AnchoredOverlay } from '@primer/react';
 
 export interface ITooltip {
   name: string;
@@ -11,23 +12,31 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
   const [showTooltip, setShowTooltip] = useState(false);
 
   return (
-    <button
-      aria-label={props.name}
-      className="relative"
-      data-testid={`tooltip-${props.name}`}
-      id={props.name}
-      onMouseEnter={() => setShowTooltip(true)}
-      onMouseLeave={() => setShowTooltip(false)}
-      type="button"
-    >
-      <QuestionIcon className="text-gitify-tooltip-icon" />
-      {showTooltip && (
-        <div className="absolute left-[-80px] z-10 w-30 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
-          <div className="text-left text-xs text-gitify-font">
-            {props.tooltip}
-          </div>
-        </div>
+    <AnchoredOverlay
+      align="center"
+      open={showTooltip}
+      renderAnchor={(anchorProps) => (
+        <button
+          {...anchorProps}
+          aria-label={props.name}
+          data-testid={`tooltip-${props.name}`}
+          id={props.name}
+          onMouseEnter={() => setShowTooltip(true)}
+          onMouseLeave={() => setShowTooltip(false)}
+          type="button"
+        >
+          <QuestionIcon className="text-gitify-tooltip-icon" />
+        </button>
       )}
-    </button>
+      side="outside-bottom"
+    >
+      <div
+        className={
+          'z-10 w-30 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout text-left text-xs text-gitify-font'
+        }
+      >
+        {props.tooltip}
+      </div>
+    </AnchoredOverlay>
   );
 };