feat: tooltips component with example

src/components/fields/Checkbox.tsx

@@ -1,9 +1,11 @@
 import type { FC, ReactNode } from 'react';
+import { Tooltip } from './Tooltip';
 
 export interface ICheckbox {
   name: string;
   label: string;
   helpText?: ReactNode | string;
+  tooltip?: ReactNode | string;
   checked: boolean;
   disabled?: boolean;
   onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
@@ -33,6 +35,7 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
             }
           >
             {props.label}
+            {props.tooltip && <Tooltip tooltip={props.tooltip} />}
           </label>
         </div>
       </div>

src/components/fields/Tooltip.test.tsx

@@ -0,0 +1,28 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import * as TestRenderer from 'react-test-renderer';
+
+import { type ITooltip, Tooltip } from './Tooltip';
+
+describe('components/fields/Tooltip.tsx', () => {
+  const props: ITooltip = {
+    tooltip: 'This is some tooltip text',
+  };
+
+  it('should render', () => {
+    const tree = TestRenderer.create(<Tooltip {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should display on mouse enter / leave', () => {
+    render(<Tooltip {...props} />);
+
+    const tooltipElement = screen.getByTitle('tooltip');
+
+    fireEvent.mouseEnter(tooltipElement);
+    expect(tooltipElement).toMatchSnapshot();
+
+    fireEvent.mouseLeave(tooltipElement);
+    expect(tooltipElement).toMatchSnapshot();
+  });
+});

src/components/fields/Tooltip.tsx

@@ -0,0 +1,28 @@
+import { QuestionIcon } from '@primer/octicons-react';
+import { type FC, type ReactNode, useState } from 'react';
+
+export interface ITooltip {
+  tooltip: ReactNode | string;
+}
+
+export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  return (
+    <span
+      title="tooltip"
+      className="relative"
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
+    >
+      <QuestionIcon className="text-blue-500 ml-1" />
+      {showTooltip && (
+        <div className="absolute bg-white dark:bg-gray-sidebar border border-gray-300 rounded p-2 shadow">
+          <div className="text-gray-700 dark:text-white text-xs text-left">
+            {props.tooltip}
+          </div>
+        </div>
+      )}
+    </span>
+  );
+};

src/routes/Settings.tsx

@@ -141,6 +141,19 @@ export const SettingsRoute: FC = () => {
               colorScope && updateSetting('colors', evt.target.checked)
             }
             disabled={!colorScope}
+            tooltip={
+              <div>
+                <div className="pb-3">
+                  Enrich notifications with author or last commenter profile
+                  information, state and GitHub-like colors.
+                </div>
+                <div className="text-orange-600">
+                  ⚠️ Users with a large number of unread notifications <i>may</i>{' '}
+                  experience rate limiting under certain circumstances. Disable
+                  this setting if you experience this.
+                </div>
+              </div>
+            }
           />
           <Checkbox
             name="showAccountHostname"