From 576e0e8460ddaba203efaf166662e06b78f032b7 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Thu, 16 Oct 2025 09:34:22 -0700
Subject: [PATCH 1/4] feat(settings): improve tooltips

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/renderer/components/fields/Tooltip.tsx    |  10 +-
 .../settings/AppearanceSettings.tsx           |  18 ++-
 .../settings/NotificationSettings.tsx         |  15 ++-
 .../components/settings/SystemSettings.tsx    |  24 ++++
 .../components/settings/TraySettings.tsx      |   6 +
 .../__snapshots__/Settings.test.tsx.snap      | 120 ++++++++++++++++++
 6 files changed, 189 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx
index 0dc7b0089..9771c4976 100644
--- a/src/renderer/components/fields/Tooltip.tsx
+++ b/src/renderer/components/fields/Tooltip.tsx
@@ -9,6 +9,8 @@ export interface ITooltip {
 
 export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
   const [showTooltip, setShowTooltip] = useState(false);
+  // Use CSS/Tailwind to center the tooltip and constrain its width to the
+  // viewport so it doesn't overflow the application window.
 
   return (
     <button
@@ -16,13 +18,19 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
       className="relative"
       data-testid={`tooltip-${props.name}`}
       id={props.name}
+      onBlur={() => setShowTooltip(false)}
+      onFocus={() => setShowTooltip(true)}
       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={
+            'absolute left-1/2 top-full mt-2 z-10 w-[240px] max-w-[calc(100vw-16px)] -translate-x-1/2 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>
diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
index 031494952..899bb1c95 100644
--- a/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -96,7 +96,13 @@ export const AppearanceSettings: FC = () => {
           onChange={(evt) =>
             updateSetting('increaseContrast', evt.target.checked)
           }
-          tooltip={<Text>Enable high contrast.</Text>}
+          tooltip={
+            <Text>
+              Enable high contrast colors for improved legibility. This
+              increases color contrast across the UI and may affect some
+              color-specific themes.
+            </Text>
+          }
         />
 
         <Stack
@@ -159,6 +165,12 @@ export const AppearanceSettings: FC = () => {
           onChange={(evt) =>
             updateSetting('showAccountHeader', evt.target.checked)
           }
+          tooltip={
+            <Text>
+              When enabled, displays an account header (avatar, username and
+              quick links) above the notifications list.
+            </Text>
+          }
           visible={!hasMultipleAccounts(auth)}
         />
 
@@ -171,7 +183,9 @@ export const AppearanceSettings: FC = () => {
           }
           tooltip={
             <Text>
-              Wrap long notification titles instead of truncating them.
+              Wrap long notification titles onto multiple lines instead of
+              truncating with an ellipsis. This shows the full title but may
+              increase the height of the notification list.
             </Text>
           }
         />
diff --git a/src/renderer/components/settings/NotificationSettings.tsx b/src/renderer/components/settings/NotificationSettings.tsx
index b720a3c96..e330c2886 100644
--- a/src/renderer/components/settings/NotificationSettings.tsx
+++ b/src/renderer/components/settings/NotificationSettings.tsx
@@ -58,6 +58,19 @@ export const NotificationSettings: FC = () => {
             { label: 'Repository', value: GroupBy.REPOSITORY },
             { label: 'Date', value: GroupBy.DATE },
           ]}
+          tooltip={
+            <Stack direction="vertical" gap="condensed">
+              <Text>Choose how notifications are displayed in the list.</Text>
+              <Text>
+                <Text as="strong">Repository</Text> groups notifications by
+                their repository full name.
+              </Text>
+              <Text>
+                <Text as="strong">Date</Text> shows notifications in
+                chronological order.
+              </Text>
+            </Stack>
+          }
           value={settings.groupBy}
         />
 
@@ -298,7 +311,7 @@ export const NotificationSettings: FC = () => {
                 only participating notifications.
               </Text>
               <Text>
-                When <Text as="em">unchecked</Text>, {APPLICATION.NAME} will
+                When <Text as="u">unchecked</Text>, {APPLICATION.NAME} will
                 fetch participating and watching notifications.
               </Text>
               <Text>
diff --git a/src/renderer/components/settings/SystemSettings.tsx b/src/renderer/components/settings/SystemSettings.tsx
index 748a676fd..52f052300 100644
--- a/src/renderer/components/settings/SystemSettings.tsx
+++ b/src/renderer/components/settings/SystemSettings.tsx
@@ -32,6 +32,21 @@ export const SystemSettings: FC = () => {
             { label: 'Foreground', value: OpenPreference.FOREGROUND },
             { label: 'Background', value: OpenPreference.BACKGROUND },
           ]}
+          tooltip={
+            <Stack direction="vertical" gap="condensed">
+              <Text>
+                Controls the behavior of how external links should opened.
+              </Text>
+              <Text>
+                <Text as="strong">Foreground</Text> will open the link and bring
+                the opened window or browser to the front.
+              </Text>
+              <Text>
+                <Text as="strong">Background</Text> opens the link without
+                stealing focus from the current window.
+              </Text>
+            </Stack>
+          }
           value={settings.openLinks}
         />
 
@@ -60,6 +75,12 @@ export const SystemSettings: FC = () => {
           onChange={(evt) =>
             updateSetting('showNotifications', evt.target.checked)
           }
+          tooltip={
+            <Text>
+              Display native operating system notifications for new unread
+              notifications.
+            </Text>
+          }
         />
 
         <Stack
@@ -136,6 +157,9 @@ export const SystemSettings: FC = () => {
           label="Open at startup"
           name="openAtStartup"
           onChange={(evt) => updateSetting('openAtStartup', evt.target.checked)}
+          tooltip={
+            <Text>Launch {APPLICATION.NAME} automatically at startup.</Text>
+          }
           visible={!window.gitify.platform.isLinux()}
         />
       </Stack>
diff --git a/src/renderer/components/settings/TraySettings.tsx b/src/renderer/components/settings/TraySettings.tsx
index f94c7060a..37e287f04 100644
--- a/src/renderer/components/settings/TraySettings.tsx
+++ b/src/renderer/components/settings/TraySettings.tsx
@@ -24,6 +24,12 @@ export const TraySettings: FC = () => {
           onChange={(evt) =>
             updateSetting('showNotificationsCountInTray', evt.target.checked)
           }
+          tooltip={
+            <Text>
+              Show the unread notification count next to the tray icon. Useful
+              for a quick glance at unread activity.
+            </Text>
+          }
           visible={window.gitify.platform.isMacOS()}
         />
 
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
index 91000589a..7e844dd42 100644
--- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
@@ -591,6 +591,30 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                 Date
               </label>
             </div>
+            <button
+              aria-label="tooltip-groupBy"
+              class="relative"
+              data-testid="tooltip-tooltip-groupBy"
+              id="tooltip-groupBy"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question text-gitify-tooltip-icon"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </button>
           </div>
           <div
             class="text-sm prc-Stack-Stack-WJVsK"
@@ -1282,6 +1306,30 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             >
               Show notification count
             </label>
+            <button
+              aria-label="tooltip-showNotificationsCountInTray"
+              class="relative"
+              data-testid="tooltip-tooltip-showNotificationsCountInTray"
+              id="tooltip-showNotificationsCountInTray"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question text-gitify-tooltip-icon"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </button>
           </div>
           <div
             class="text-sm prc-Stack-Stack-WJVsK"
@@ -1491,6 +1539,30 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                 Background
               </label>
             </div>
+            <button
+              aria-label="tooltip-openLinks"
+              class="relative"
+              data-testid="tooltip-tooltip-openLinks"
+              id="tooltip-openLinks"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question text-gitify-tooltip-icon"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </button>
           </div>
           <div
             class="text-sm prc-Stack-Stack-WJVsK"
@@ -1561,6 +1633,30 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             >
               Show system notifications
             </label>
+            <button
+              aria-label="tooltip-showNotifications"
+              class="relative"
+              data-testid="tooltip-tooltip-showNotifications"
+              id="tooltip-showNotifications"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question text-gitify-tooltip-icon"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </button>
           </div>
           <div
             class="text-sm prc-Stack-Stack-WJVsK"
@@ -1747,6 +1843,30 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             >
               Open at startup
             </label>
+            <button
+              aria-label="tooltip-openAtStartup"
+              class="relative"
+              data-testid="tooltip-tooltip-openAtStartup"
+              id="tooltip-openAtStartup"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question text-gitify-tooltip-icon"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
       </fieldset>

From f0fb349ee379168b7b1a86421d451744607386ba Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Thu, 16 Oct 2025 10:52:17 -0700
Subject: [PATCH 2/4] feat(settings): improve tooltips

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/renderer/components/fields/Tooltip.tsx    |  51 +++----
 .../__snapshots__/Checkbox.test.tsx.snap      |   8 +-
 .../__snapshots__/Tooltip.test.tsx.snap       |   8 +-
 .../__snapshots__/FilterSection.test.tsx.snap |  72 +++++++---
 .../__snapshots__/ReasonFilter.test.tsx.snap  | 128 +++++++++++++-----
 .../__snapshots__/StateFilter.test.tsx.snap   |  32 +++--
 .../SubjectTypeFilter.test.tsx.snap           |   8 +-
 .../UserTypeFilter.test.tsx.snap              |  16 ++-
 .../__snapshots__/Filters.test.tsx.snap       | 100 ++++++++++----
 .../__snapshots__/Settings.test.tsx.snap      | 114 ++++++++++------
 10 files changed, 381 insertions(+), 156 deletions(-)

diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx
index 9771c4976..7f7f97c64 100644
--- a/src/renderer/components/fields/Tooltip.tsx
+++ b/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;
@@ -9,33 +10,35 @@ export interface ITooltip {
 
 export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
   const [showTooltip, setShowTooltip] = useState(false);
-  // Use CSS/Tailwind to center the tooltip and constrain its width to the
-  // viewport so it doesn't overflow the application window.
 
   return (
-    <button
-      aria-label={props.name}
-      className="relative"
-      data-testid={`tooltip-${props.name}`}
-      id={props.name}
-      onBlur={() => setShowTooltip(false)}
-      onFocus={() => setShowTooltip(true)}
-      onMouseEnter={() => setShowTooltip(true)}
-      onMouseLeave={() => setShowTooltip(false)}
-      type="button"
-    >
-      <QuestionIcon className="text-gitify-tooltip-icon" />
-      {showTooltip && (
-        <div
-          className={
-            'absolute left-1/2 top-full mt-2 z-10 w-[240px] max-w-[calc(100vw-16px)] -translate-x-1/2 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout'
-          }
+    <AnchoredOverlay
+      align="center"
+      onClose={() => setShowTooltip(false)}
+      onOpen={() => setShowTooltip(true)}
+      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"
         >
-          <div className="text-left text-xs text-gitify-font">
-            {props.tooltip}
-          </div>
-        </div>
+          <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>
   );
 };
diff --git a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
index 21cec8378..bef3fb54a 100644
--- a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
@@ -436,10 +436,12 @@ exports[`renderer/components/fields/Checkbox.tsx should render - tooltip 1`] = `
           Appearance
         </label>
         <button
+          aria-expanded="false"
+          aria-haspopup="true"
           aria-label="tooltip-appearance"
-          class="relative"
           data-testid="tooltip-tooltip-appearance"
           id="tooltip-appearance"
+          tabindex="0"
           type="button"
         >
           <svg
@@ -486,10 +488,12 @@ exports[`renderer/components/fields/Checkbox.tsx should render - tooltip 1`] = `
         Appearance
       </label>
       <button
+        aria-expanded="false"
+        aria-haspopup="true"
         aria-label="tooltip-appearance"
-        class="relative"
         data-testid="tooltip-tooltip-appearance"
         id="tooltip-appearance"
+        tabindex="0"
         type="button"
       >
         <svg
diff --git a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap
index 22923a84a..69ed9756a 100644
--- a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap
@@ -69,10 +69,12 @@ exports[`renderer/components/fields/Tooltip.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <button
+        aria-expanded="false"
+        aria-haspopup="true"
         aria-label="test"
-        class="relative"
         data-testid="tooltip-test"
         id="test"
+        tabindex="0"
         type="button"
       >
         <svg
@@ -96,10 +98,12 @@ exports[`renderer/components/fields/Tooltip.tsx should render 1`] = `
   </body>,
   "container": <div>
     <button
+      aria-expanded="false"
+      aria-haspopup="true"
       aria-label="test"
-      class="relative"
       data-testid="tooltip-test"
       id="test"
+      tabindex="0"
       type="button"
     >
       <svg
diff --git a/src/renderer/components/filters/__snapshots__/FilterSection.test.tsx.snap b/src/renderer/components/filters/__snapshots__/FilterSection.test.tsx.snap
index 7b917a7bc..43b42d26a 100644
--- a/src/renderer/components/filters/__snapshots__/FilterSection.test.tsx.snap
+++ b/src/renderer/components/filters/__snapshots__/FilterSection.test.tsx.snap
@@ -59,10 +59,12 @@ exports[`renderer/components/filters/FilterSection.tsx should be able to toggle
       Open
     </label>
     <button
+      aria-expanded="false"
+      aria-haspopup="true"
       aria-label="tooltip-Open"
-      class="relative"
       data-testid="tooltip-tooltip-Open"
       id="tooltip-Open"
+      tabindex="0"
       type="button"
     >
       <svg
@@ -137,10 +139,12 @@ exports[`renderer/components/filters/FilterSection.tsx should be able to toggle
       Closed
     </label>
     <button
+      aria-expanded="false"
+      aria-haspopup="true"
       aria-label="tooltip-Closed"
-      class="relative"
       data-testid="tooltip-tooltip-Closed"
       id="tooltip-Closed"
+      tabindex="0"
       type="button"
     >
       <svg
@@ -188,10 +192,12 @@ exports[`renderer/components/filters/FilterSection.tsx should be able to toggle
       Other
     </label>
     <button
+      aria-expanded="false"
+      aria-haspopup="true"
       aria-label="tooltip-Other"
-      class="relative"
       data-testid="tooltip-tooltip-Other"
       id="tooltip-Other"
+      tabindex="0"
       type="button"
     >
       <svg
@@ -280,10 +286,12 @@ exports[`renderer/components/filters/FilterSection.tsx should be able to toggle
       Open
     </label>
     <button
+      aria-expanded="false"
+      aria-haspopup="true"
       aria-label="tooltip-Open"
-      class="relative"
       data-testid="tooltip-tooltip-Open"
       id="tooltip-Open"
+      tabindex="0"
       type="button"
     >
       <svg
@@ -358,10 +366,12 @@ exports[`renderer/components/filters/FilterSection.tsx should be able to toggle
       Closed
     </label>
     <button
+      aria-expanded="false"
+      aria-haspopup="true"
       aria-label="tooltip-Closed"
-      class="relative"
       data-testid="tooltip-tooltip-Closed"
       id="tooltip-Closed"
+      tabindex="0"
       type="button"
     >
       <svg
@@ -409,10 +419,12 @@ exports[`renderer/components/filters/FilterSection.tsx should be able to toggle
       Other
     </label>
     <button
+      aria-expanded="false"
+      aria-haspopup="true"
       aria-label="tooltip-Other"
-      class="relative"
       data-testid="tooltip-tooltip-Other"
       id="tooltip-Other"
+      tabindex="0"
       type="button"
     >
       <svg
@@ -546,10 +558,12 @@ exports[`renderer/components/filters/FilterSection.tsx should render itself & it
               Open
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Open"
-              class="relative"
               data-testid="tooltip-tooltip-Open"
               id="tooltip-Open"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -624,10 +638,12 @@ exports[`renderer/components/filters/FilterSection.tsx should render itself & it
               Closed
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Closed"
-              class="relative"
               data-testid="tooltip-tooltip-Closed"
               id="tooltip-Closed"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -675,10 +691,12 @@ exports[`renderer/components/filters/FilterSection.tsx should render itself & it
               Other
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Other"
-              class="relative"
               data-testid="tooltip-tooltip-Other"
               id="tooltip-Other"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -809,10 +827,12 @@ exports[`renderer/components/filters/FilterSection.tsx should render itself & it
             Open
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Open"
-            class="relative"
             data-testid="tooltip-tooltip-Open"
             id="tooltip-Open"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -887,10 +907,12 @@ exports[`renderer/components/filters/FilterSection.tsx should render itself & it
             Closed
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Closed"
-            class="relative"
             data-testid="tooltip-tooltip-Closed"
             id="tooltip-Closed"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -938,10 +960,12 @@ exports[`renderer/components/filters/FilterSection.tsx should render itself & it
             Other
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Other"
-            class="relative"
             data-testid="tooltip-tooltip-Other"
             id="tooltip-Other"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1129,10 +1153,12 @@ exports[`renderer/components/filters/FilterSection.tsx should render itself & it
               Open
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Open"
-              class="relative"
               data-testid="tooltip-tooltip-Open"
               id="tooltip-Open"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1207,10 +1233,12 @@ exports[`renderer/components/filters/FilterSection.tsx should render itself & it
               Closed
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Closed"
-              class="relative"
               data-testid="tooltip-tooltip-Closed"
               id="tooltip-Closed"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1258,10 +1286,12 @@ exports[`renderer/components/filters/FilterSection.tsx should render itself & it
               Other
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Other"
-              class="relative"
               data-testid="tooltip-tooltip-Other"
               id="tooltip-Other"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1392,10 +1422,12 @@ exports[`renderer/components/filters/FilterSection.tsx should render itself & it
             Open
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Open"
-            class="relative"
             data-testid="tooltip-tooltip-Open"
             id="tooltip-Open"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1470,10 +1502,12 @@ exports[`renderer/components/filters/FilterSection.tsx should render itself & it
             Closed
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Closed"
-            class="relative"
             data-testid="tooltip-tooltip-Closed"
             id="tooltip-Closed"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1521,10 +1555,12 @@ exports[`renderer/components/filters/FilterSection.tsx should render itself & it
             Other
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Other"
-            class="relative"
             data-testid="tooltip-tooltip-Other"
             id="tooltip-Other"
+            tabindex="0"
             type="button"
           >
             <svg
diff --git a/src/renderer/components/filters/__snapshots__/ReasonFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/ReasonFilter.test.tsx.snap
index 57e47c055..8c610f1ae 100644
--- a/src/renderer/components/filters/__snapshots__/ReasonFilter.test.tsx.snap
+++ b/src/renderer/components/filters/__snapshots__/ReasonFilter.test.tsx.snap
@@ -45,10 +45,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
                 Reason
               </h2>
               <button
+                aria-expanded="false"
+                aria-haspopup="true"
                 aria-label="tooltip-reason"
-                class="relative"
                 data-testid="tooltip-tooltip-reason"
                 id="tooltip-reason"
+                tabindex="0"
                 type="button"
               >
                 <svg
@@ -102,10 +104,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Approval Requested
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Approval Requested"
-              class="relative"
               data-testid="tooltip-tooltip-Approval Requested"
               id="tooltip-Approval Requested"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -153,10 +157,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Assigned
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Assigned"
-              class="relative"
               data-testid="tooltip-tooltip-Assigned"
               id="tooltip-Assigned"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -204,10 +210,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Authored
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Authored"
-              class="relative"
               data-testid="tooltip-tooltip-Authored"
               id="tooltip-Authored"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -255,10 +263,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Workflow Run Completed
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Workflow Run Completed"
-              class="relative"
               data-testid="tooltip-tooltip-Workflow Run Completed"
               id="tooltip-Workflow Run Completed"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -306,10 +316,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Commented
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Commented"
-              class="relative"
               data-testid="tooltip-tooltip-Commented"
               id="tooltip-Commented"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -357,10 +369,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Invitation Received
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Invitation Received"
-              class="relative"
               data-testid="tooltip-tooltip-Invitation Received"
               id="tooltip-Invitation Received"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -408,10 +422,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Updated
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Updated"
-              class="relative"
               data-testid="tooltip-tooltip-Updated"
               id="tooltip-Updated"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -459,10 +475,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Member Feature Requested
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Member Feature Requested"
-              class="relative"
               data-testid="tooltip-tooltip-Member Feature Requested"
               id="tooltip-Member Feature Requested"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -510,10 +528,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Mentioned
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Mentioned"
-              class="relative"
               data-testid="tooltip-tooltip-Mentioned"
               id="tooltip-Mentioned"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -561,10 +581,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Review Requested
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Review Requested"
-              class="relative"
               data-testid="tooltip-tooltip-Review Requested"
               id="tooltip-Review Requested"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -612,10 +634,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Security Advisory Credit Received
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Security Advisory Credit Received"
-              class="relative"
               data-testid="tooltip-tooltip-Security Advisory Credit Received"
               id="tooltip-Security Advisory Credit Received"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -663,10 +687,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Security Alert Received
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Security Alert Received"
-              class="relative"
               data-testid="tooltip-tooltip-Security Alert Received"
               id="tooltip-Security Alert Received"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -714,10 +740,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               State Changed
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-State Changed"
-              class="relative"
               data-testid="tooltip-tooltip-State Changed"
               id="tooltip-State Changed"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -765,10 +793,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Updated
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Updated"
-              class="relative"
               data-testid="tooltip-tooltip-Updated"
               id="tooltip-Updated"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -816,10 +846,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Team Mentioned
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Team Mentioned"
-              class="relative"
               data-testid="tooltip-tooltip-Team Mentioned"
               id="tooltip-Team Mentioned"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -890,10 +922,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
               Reason
             </h2>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-reason"
-              class="relative"
               data-testid="tooltip-tooltip-reason"
               id="tooltip-reason"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -947,10 +981,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Approval Requested
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Approval Requested"
-            class="relative"
             data-testid="tooltip-tooltip-Approval Requested"
             id="tooltip-Approval Requested"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -998,10 +1034,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Assigned
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Assigned"
-            class="relative"
             data-testid="tooltip-tooltip-Assigned"
             id="tooltip-Assigned"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1049,10 +1087,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Authored
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Authored"
-            class="relative"
             data-testid="tooltip-tooltip-Authored"
             id="tooltip-Authored"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1100,10 +1140,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Workflow Run Completed
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Workflow Run Completed"
-            class="relative"
             data-testid="tooltip-tooltip-Workflow Run Completed"
             id="tooltip-Workflow Run Completed"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1151,10 +1193,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Commented
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Commented"
-            class="relative"
             data-testid="tooltip-tooltip-Commented"
             id="tooltip-Commented"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1202,10 +1246,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Invitation Received
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Invitation Received"
-            class="relative"
             data-testid="tooltip-tooltip-Invitation Received"
             id="tooltip-Invitation Received"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1253,10 +1299,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Updated
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Updated"
-            class="relative"
             data-testid="tooltip-tooltip-Updated"
             id="tooltip-Updated"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1304,10 +1352,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Member Feature Requested
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Member Feature Requested"
-            class="relative"
             data-testid="tooltip-tooltip-Member Feature Requested"
             id="tooltip-Member Feature Requested"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1355,10 +1405,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Mentioned
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Mentioned"
-            class="relative"
             data-testid="tooltip-tooltip-Mentioned"
             id="tooltip-Mentioned"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1406,10 +1458,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Review Requested
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Review Requested"
-            class="relative"
             data-testid="tooltip-tooltip-Review Requested"
             id="tooltip-Review Requested"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1457,10 +1511,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Security Advisory Credit Received
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Security Advisory Credit Received"
-            class="relative"
             data-testid="tooltip-tooltip-Security Advisory Credit Received"
             id="tooltip-Security Advisory Credit Received"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1508,10 +1564,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Security Alert Received
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Security Alert Received"
-            class="relative"
             data-testid="tooltip-tooltip-Security Alert Received"
             id="tooltip-Security Alert Received"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1559,10 +1617,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             State Changed
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-State Changed"
-            class="relative"
             data-testid="tooltip-tooltip-State Changed"
             id="tooltip-State Changed"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1610,10 +1670,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Updated
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Updated"
-            class="relative"
             data-testid="tooltip-tooltip-Updated"
             id="tooltip-Updated"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -1661,10 +1723,12 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
             Team Mentioned
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Team Mentioned"
-            class="relative"
             data-testid="tooltip-tooltip-Team Mentioned"
             id="tooltip-Team Mentioned"
+            tabindex="0"
             type="button"
           >
             <svg
diff --git a/src/renderer/components/filters/__snapshots__/StateFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/StateFilter.test.tsx.snap
index a6fb0b16b..fdcfef19a 100644
--- a/src/renderer/components/filters/__snapshots__/StateFilter.test.tsx.snap
+++ b/src/renderer/components/filters/__snapshots__/StateFilter.test.tsx.snap
@@ -48,10 +48,12 @@ exports[`renderer/components/filters/StateFilter.tsx should render itself & its
                 State
               </h2>
               <button
+                aria-expanded="false"
+                aria-haspopup="true"
                 aria-label="tooltip-state"
-                class="relative"
                 data-testid="tooltip-tooltip-state"
                 id="tooltip-state"
+                tabindex="0"
                 type="button"
               >
                 <svg
@@ -132,10 +134,12 @@ exports[`renderer/components/filters/StateFilter.tsx should render itself & its
               Open
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Open"
-              class="relative"
               data-testid="tooltip-tooltip-Open"
               id="tooltip-Open"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -210,10 +214,12 @@ exports[`renderer/components/filters/StateFilter.tsx should render itself & its
               Closed
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Closed"
-              class="relative"
               data-testid="tooltip-tooltip-Closed"
               id="tooltip-Closed"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -261,10 +267,12 @@ exports[`renderer/components/filters/StateFilter.tsx should render itself & its
               Other
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Other"
-              class="relative"
               data-testid="tooltip-tooltip-Other"
               id="tooltip-Other"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -338,10 +346,12 @@ exports[`renderer/components/filters/StateFilter.tsx should render itself & its
               State
             </h2>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-state"
-              class="relative"
               data-testid="tooltip-tooltip-state"
               id="tooltip-state"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -422,10 +432,12 @@ exports[`renderer/components/filters/StateFilter.tsx should render itself & its
             Open
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Open"
-            class="relative"
             data-testid="tooltip-tooltip-Open"
             id="tooltip-Open"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -500,10 +512,12 @@ exports[`renderer/components/filters/StateFilter.tsx should render itself & its
             Closed
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Closed"
-            class="relative"
             data-testid="tooltip-tooltip-Closed"
             id="tooltip-Closed"
+            tabindex="0"
             type="button"
           >
             <svg
@@ -551,10 +565,12 @@ exports[`renderer/components/filters/StateFilter.tsx should render itself & its
             Other
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Other"
-            class="relative"
             data-testid="tooltip-tooltip-Other"
             id="tooltip-Other"
+            tabindex="0"
             type="button"
           >
             <svg
diff --git a/src/renderer/components/filters/__snapshots__/SubjectTypeFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/SubjectTypeFilter.test.tsx.snap
index 1e903ca7d..dc1c03c70 100644
--- a/src/renderer/components/filters/__snapshots__/SubjectTypeFilter.test.tsx.snap
+++ b/src/renderer/components/filters/__snapshots__/SubjectTypeFilter.test.tsx.snap
@@ -45,10 +45,12 @@ exports[`renderer/components/filters/SubjectTypeFilter.tsx should render itself
                 Type
               </h2>
               <button
+                aria-expanded="false"
+                aria-haspopup="true"
                 aria-label="tooltip-type"
-                class="relative"
                 data-testid="tooltip-tooltip-type"
                 id="tooltip-type"
+                tabindex="0"
                 type="button"
               >
                 <svg
@@ -395,10 +397,12 @@ exports[`renderer/components/filters/SubjectTypeFilter.tsx should render itself
               Type
             </h2>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-type"
-              class="relative"
               data-testid="tooltip-tooltip-type"
               id="tooltip-type"
+              tabindex="0"
               type="button"
             >
               <svg
diff --git a/src/renderer/components/filters/__snapshots__/UserTypeFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/UserTypeFilter.test.tsx.snap
index 46890900d..34a495ed2 100644
--- a/src/renderer/components/filters/__snapshots__/UserTypeFilter.test.tsx.snap
+++ b/src/renderer/components/filters/__snapshots__/UserTypeFilter.test.tsx.snap
@@ -45,10 +45,12 @@ exports[`renderer/components/filters/UserTypeFilter.tsx should render itself & i
                 User Type
               </h2>
               <button
+                aria-expanded="false"
+                aria-haspopup="true"
                 aria-label="tooltip-user-type"
-                class="relative"
                 data-testid="tooltip-tooltip-user-type"
                 id="tooltip-user-type"
+                tabindex="0"
                 type="button"
               >
                 <svg
@@ -129,10 +131,12 @@ exports[`renderer/components/filters/UserTypeFilter.tsx should render itself & i
               Bot
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Bot"
-              class="relative"
               data-testid="tooltip-tooltip-Bot"
               id="tooltip-Bot"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -230,10 +234,12 @@ exports[`renderer/components/filters/UserTypeFilter.tsx should render itself & i
               User Type
             </h2>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-user-type"
-              class="relative"
               data-testid="tooltip-tooltip-user-type"
               id="tooltip-user-type"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -314,10 +320,12 @@ exports[`renderer/components/filters/UserTypeFilter.tsx should render itself & i
             Bot
           </label>
           <button
+            aria-expanded="false"
+            aria-haspopup="true"
             aria-label="tooltip-Bot"
-            class="relative"
             data-testid="tooltip-tooltip-Bot"
             id="tooltip-Bot"
+            tabindex="0"
             type="button"
           >
             <svg
diff --git a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
index b9e0b3f63..c799e84f9 100644
--- a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
@@ -136,10 +136,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                 Search
               </h2>
               <button
+                aria-expanded="false"
+                aria-haspopup="true"
                 aria-label="tooltip-search"
-                class="relative"
                 data-testid="tooltip-tooltip-search"
                 id="tooltip-search"
+                tabindex="0"
                 type="button"
               >
                 <svg
@@ -357,10 +359,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                 User Type
               </h2>
               <button
+                aria-expanded="false"
+                aria-haspopup="true"
                 aria-label="tooltip-user-type"
-                class="relative"
                 data-testid="tooltip-tooltip-user-type"
                 id="tooltip-user-type"
+                tabindex="0"
                 type="button"
               >
                 <svg
@@ -441,10 +445,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Bot
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Bot"
-              class="relative"
               data-testid="tooltip-tooltip-Bot"
               id="tooltip-Bot"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -539,10 +545,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                 Type
               </h2>
               <button
+                aria-expanded="false"
+                aria-haspopup="true"
                 aria-label="tooltip-type"
-                class="relative"
                 data-testid="tooltip-tooltip-type"
                 id="tooltip-type"
+                tabindex="0"
                 type="button"
               >
                 <svg
@@ -889,10 +897,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                 State
               </h2>
               <button
+                aria-expanded="false"
+                aria-haspopup="true"
                 aria-label="tooltip-state"
-                class="relative"
                 data-testid="tooltip-tooltip-state"
                 id="tooltip-state"
+                tabindex="0"
                 type="button"
               >
                 <svg
@@ -973,10 +983,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Open
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Open"
-              class="relative"
               data-testid="tooltip-tooltip-Open"
               id="tooltip-Open"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1051,10 +1063,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Closed
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Closed"
-              class="relative"
               data-testid="tooltip-tooltip-Closed"
               id="tooltip-Closed"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1102,10 +1116,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Other
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Other"
-              class="relative"
               data-testid="tooltip-tooltip-Other"
               id="tooltip-Other"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1173,10 +1189,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                 Reason
               </h2>
               <button
+                aria-expanded="false"
+                aria-haspopup="true"
                 aria-label="tooltip-reason"
-                class="relative"
                 data-testid="tooltip-tooltip-reason"
                 id="tooltip-reason"
+                tabindex="0"
                 type="button"
               >
                 <svg
@@ -1230,10 +1248,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Approval Requested
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Approval Requested"
-              class="relative"
               data-testid="tooltip-tooltip-Approval Requested"
               id="tooltip-Approval Requested"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1281,10 +1301,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Assigned
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Assigned"
-              class="relative"
               data-testid="tooltip-tooltip-Assigned"
               id="tooltip-Assigned"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1332,10 +1354,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Authored
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Authored"
-              class="relative"
               data-testid="tooltip-tooltip-Authored"
               id="tooltip-Authored"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1383,10 +1407,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Workflow Run Completed
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Workflow Run Completed"
-              class="relative"
               data-testid="tooltip-tooltip-Workflow Run Completed"
               id="tooltip-Workflow Run Completed"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1434,10 +1460,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Commented
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Commented"
-              class="relative"
               data-testid="tooltip-tooltip-Commented"
               id="tooltip-Commented"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1485,10 +1513,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Invitation Received
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Invitation Received"
-              class="relative"
               data-testid="tooltip-tooltip-Invitation Received"
               id="tooltip-Invitation Received"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1536,10 +1566,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Updated
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Updated"
-              class="relative"
               data-testid="tooltip-tooltip-Updated"
               id="tooltip-Updated"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1587,10 +1619,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Member Feature Requested
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Member Feature Requested"
-              class="relative"
               data-testid="tooltip-tooltip-Member Feature Requested"
               id="tooltip-Member Feature Requested"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1638,10 +1672,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Mentioned
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Mentioned"
-              class="relative"
               data-testid="tooltip-tooltip-Mentioned"
               id="tooltip-Mentioned"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1689,10 +1725,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Review Requested
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Review Requested"
-              class="relative"
               data-testid="tooltip-tooltip-Review Requested"
               id="tooltip-Review Requested"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1740,10 +1778,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Security Advisory Credit Received
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Security Advisory Credit Received"
-              class="relative"
               data-testid="tooltip-tooltip-Security Advisory Credit Received"
               id="tooltip-Security Advisory Credit Received"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1791,10 +1831,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Security Alert Received
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Security Alert Received"
-              class="relative"
               data-testid="tooltip-tooltip-Security Alert Received"
               id="tooltip-Security Alert Received"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1842,10 +1884,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               State Changed
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-State Changed"
-              class="relative"
               data-testid="tooltip-tooltip-State Changed"
               id="tooltip-State Changed"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1893,10 +1937,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Updated
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Updated"
-              class="relative"
               data-testid="tooltip-tooltip-Updated"
               id="tooltip-Updated"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1944,10 +1990,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               Team Mentioned
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-Team Mentioned"
-              class="relative"
               data-testid="tooltip-tooltip-Team Mentioned"
               id="tooltip-Team Mentioned"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1989,7 +2037,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
       data-wrap="nowrap"
     >
       <button
-        aria-describedby="_r_2_-loading-announcement _r_1_"
+        aria-describedby="_r_q_-loading-announcement _r_p_"
         class="prc-Button-ButtonBase-c50BI"
         data-loading="false"
         data-size="medium"
@@ -2035,7 +2083,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         aria-hidden="true"
         class="prc-TooltipV2-Tooltip-cYMVY"
         data-direction="n"
-        id="_r_1_"
+        id="_r_p_"
         popover="auto"
         role="tooltip"
       >
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
index 7e844dd42..53213d7c8 100644
--- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
@@ -260,10 +260,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Increase contrast
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-increaseContrast"
-              class="relative"
               data-testid="tooltip-tooltip-increaseContrast"
               id="tooltip-increaseContrast"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -304,7 +306,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             >
               <div>
                 <button
-                  aria-describedby="_r_1_-loading-announcement"
+                  aria-describedby="_r_2_-loading-announcement"
                   aria-label="Zoom out"
                   class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj"
                   data-component="IconButton"
@@ -338,7 +340,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </div>
               <div>
                 <button
-                  aria-describedby="_r_2_-loading-announcement"
+                  aria-describedby="_r_3_-loading-announcement"
                   aria-label="Zoom percentage"
                   class="prc-Button-ButtonBase-c50BI"
                   data-loading="false"
@@ -365,7 +367,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </div>
               <div>
                 <button
-                  aria-describedby="_r_3_-loading-announcement"
+                  aria-describedby="_r_4_-loading-announcement"
                   aria-label="Zoom in"
                   class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj"
                   data-component="IconButton"
@@ -399,7 +401,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </div>
               <div>
                 <button
-                  aria-describedby="_r_4_-loading-announcement"
+                  aria-describedby="_r_5_-loading-announcement"
                   aria-label="Reset zoom"
                   class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj"
                   data-component="IconButton"
@@ -452,10 +454,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Show full notification title
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-wrapNotificationTitle"
-              class="relative"
               data-testid="tooltip-tooltip-wrapNotificationTitle"
               id="tooltip-wrapNotificationTitle"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -592,10 +596,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </label>
             </div>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-groupBy"
-              class="relative"
               data-testid="tooltip-tooltip-groupBy"
               id="tooltip-groupBy"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -681,10 +687,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </label>
             </div>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-fetchType"
-              class="relative"
               data-testid="tooltip-tooltip-fetchType"
               id="tooltip-fetchType"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -725,7 +733,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             >
               <div>
                 <button
-                  aria-describedby="_r_5_-loading-announcement"
+                  aria-describedby="_r_9_-loading-announcement"
                   aria-label="Decrease fetch interval"
                   class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj"
                   data-component="IconButton"
@@ -756,7 +764,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </div>
               <div>
                 <button
-                  aria-describedby="_r_6_-loading-announcement"
+                  aria-describedby="_r_a_-loading-announcement"
                   aria-label="Fetch interval"
                   class="prc-Button-ButtonBase-c50BI"
                   data-loading="false"
@@ -782,7 +790,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </div>
               <div>
                 <button
-                  aria-describedby="_r_7_-loading-announcement"
+                  aria-describedby="_r_b_-loading-announcement"
                   aria-label="Increase fetch interval"
                   class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj"
                   data-component="IconButton"
@@ -813,7 +821,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </div>
               <div>
                 <button
-                  aria-describedby="_r_8_-loading-announcement"
+                  aria-describedby="_r_c_-loading-announcement"
                   aria-label="Reset fetch interval"
                   class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj"
                   data-component="IconButton"
@@ -867,10 +875,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Fetch all notifications
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-fetchAllNotifications"
-              class="relative"
               data-testid="tooltip-tooltip-fetchAllNotifications"
               id="tooltip-fetchAllNotifications"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -914,10 +924,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Fetch detailed notifications
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-detailedNotifications"
-              class="relative"
               data-testid="tooltip-tooltip-detailedNotifications"
               id="tooltip-detailedNotifications"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -973,10 +985,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                   Show notification metric pills
                 </label>
                 <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
                   aria-label="tooltip-showPills"
-                  class="relative"
                   data-testid="tooltip-tooltip-showPills"
                   id="tooltip-showPills"
+                  tabindex="0"
                   type="button"
                 >
                   <svg
@@ -1020,10 +1034,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                   Show GitHub number
                 </label>
                 <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
                   aria-label="tooltip-showNumber"
-                  class="relative"
                   data-testid="tooltip-tooltip-showNumber"
                   id="tooltip-showNumber"
+                  tabindex="0"
                   type="button"
                 >
                   <svg
@@ -1068,10 +1084,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Fetch only participating
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-showOnlyParticipating"
-              class="relative"
               data-testid="tooltip-tooltip-showOnlyParticipating"
               id="tooltip-showOnlyParticipating"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1114,10 +1132,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Mark as done on open
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-markAsDoneOnOpen"
-              class="relative"
               data-testid="tooltip-tooltip-markAsDoneOnOpen"
               id="tooltip-markAsDoneOnOpen"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1160,10 +1180,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Mark as done on unsubscribe
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-markAsDoneOnUnsubscribe"
-              class="relative"
               data-testid="tooltip-tooltip-markAsDoneOnUnsubscribe"
               id="tooltip-markAsDoneOnUnsubscribe"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1206,10 +1228,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Delay notification state
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-delayNotificationState"
-              class="relative"
               data-testid="tooltip-tooltip-delayNotificationState"
               id="tooltip-delayNotificationState"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1307,10 +1331,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Show notification count
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-showNotificationsCountInTray"
-              class="relative"
               data-testid="tooltip-tooltip-showNotificationsCountInTray"
               id="tooltip-showNotificationsCountInTray"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1354,10 +1380,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Highlight unread notifications
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-useUnreadActiveIcon"
-              class="relative"
               data-testid="tooltip-tooltip-useUnreadActiveIcon"
               id="tooltip-useUnreadActiveIcon"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1400,10 +1428,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Use alternate idle icon
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-useAlternateIdleIcon"
-              class="relative"
               data-testid="tooltip-tooltip-useAlternateIdleIcon"
               id="tooltip-useAlternateIdleIcon"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1540,10 +1570,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </label>
             </div>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-openLinks"
-              class="relative"
               data-testid="tooltip-tooltip-openLinks"
               id="tooltip-openLinks"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1587,10 +1619,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Enable keyboard shortcut
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-keyboardShortcut"
-              class="relative"
               data-testid="tooltip-tooltip-keyboardShortcut"
               id="tooltip-keyboardShortcut"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1634,10 +1668,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Show system notifications
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-showNotifications"
-              class="relative"
               data-testid="tooltip-tooltip-showNotifications"
               id="tooltip-showNotifications"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1696,7 +1732,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             >
               <div>
                 <button
-                  aria-describedby="_r_9_-loading-announcement"
+                  aria-describedby="_r_r_-loading-announcement"
                   aria-label="Volume down"
                   class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj"
                   data-component="IconButton"
@@ -1732,7 +1768,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </div>
               <div>
                 <button
-                  aria-describedby="_r_a_-loading-announcement"
+                  aria-describedby="_r_s_-loading-announcement"
                   aria-label="Volume percentage"
                   class="prc-Button-ButtonBase-c50BI"
                   data-loading="false"
@@ -1759,7 +1795,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </div>
               <div>
                 <button
-                  aria-describedby="_r_b_-loading-announcement"
+                  aria-describedby="_r_t_-loading-announcement"
                   aria-label="Volume up"
                   class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj"
                   data-component="IconButton"
@@ -1791,7 +1827,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </div>
               <div>
                 <button
-                  aria-describedby="_r_c_-loading-announcement"
+                  aria-describedby="_r_u_-loading-announcement"
                   aria-label="Reset volume"
                   class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj"
                   data-component="IconButton"
@@ -1844,10 +1880,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Open at startup
             </label>
             <button
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="tooltip-openAtStartup"
-              class="relative"
               data-testid="tooltip-tooltip-openAtStartup"
               id="tooltip-openAtStartup"
+              tabindex="0"
               type="button"
             >
               <svg
@@ -1879,7 +1917,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
         data-wrap="nowrap"
       >
         <button
-          aria-describedby="_r_d_-loading-announcement"
+          aria-describedby="_r_10_-loading-announcement"
           class="Box-sc-g0xbh4-0 jRKXQy prc-Button-ButtonBase-c50BI"
           data-loading="false"
           data-no-visuals="true"
@@ -1925,7 +1963,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
         data-wrap="nowrap"
       >
         <button
-          aria-describedby="_r_f_-loading-announcement _r_e_"
+          aria-describedby="_r_12_-loading-announcement _r_11_"
           class="prc-Button-ButtonBase-c50BI"
           data-loading="false"
           data-no-visuals="true"
@@ -1953,7 +1991,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           aria-hidden="true"
           class="prc-TooltipV2-Tooltip-cYMVY"
           data-direction="n"
-          id="_r_e_"
+          id="_r_11_"
           popover="auto"
           role="tooltip"
         >
@@ -1970,7 +2008,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
         data-wrap="nowrap"
       >
         <button
-          aria-describedby="_r_h_-loading-announcement _r_g_"
+          aria-describedby="_r_14_-loading-announcement _r_13_"
           aria-label="Accounts"
           class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj"
           data-component="IconButton"
@@ -2002,14 +2040,14 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           aria-hidden="true"
           class="prc-TooltipV2-Tooltip-cYMVY"
           data-direction="n"
-          id="_r_g_"
+          id="_r_13_"
           popover="auto"
           role="tooltip"
         >
           Accounts
         </span>
         <button
-          aria-describedby="_r_j_-loading-announcement _r_i_"
+          aria-describedby="_r_16_-loading-announcement _r_15_"
           aria-label="Quit Gitify"
           class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj"
           data-component="IconButton"
@@ -2041,7 +2079,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           aria-hidden="true"
           class="prc-TooltipV2-Tooltip-cYMVY"
           data-direction="nw"
-          id="_r_i_"
+          id="_r_15_"
           popover="auto"
           role="tooltip"
         >

From e52fcf3e88078053a42fdbdf9a6605b80b252700 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Thu, 16 Oct 2025 11:18:55 -0700
Subject: [PATCH 3/4] feat(settings): improve tooltips

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 .../components/fields/Tooltip.test.tsx        |  39 +++-
 .../__snapshots__/Tooltip.test.tsx.snap       | 179 ------------------
 .../settings/NotificationSettings.test.tsx    |  24 ++-
 3 files changed, 49 insertions(+), 193 deletions(-)
 delete mode 100644 src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap

diff --git a/src/renderer/components/fields/Tooltip.test.tsx b/src/renderer/components/fields/Tooltip.test.tsx
index 466f3ee24..81c4da9bc 100644
--- a/src/renderer/components/fields/Tooltip.test.tsx
+++ b/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();
   });
 });
diff --git a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap
deleted file mode 100644
index 69ed9756a..000000000
--- a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap
+++ /dev/null
@@ -1,179 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter / leave 1`] = `
-<button
-  aria-label="test"
-  class="relative"
-  data-testid="tooltip-test"
-  id="test"
-  type="button"
->
-  <svg
-    aria-hidden="true"
-    class="octicon octicon-question text-gitify-tooltip-icon"
-    display="inline-block"
-    fill="currentColor"
-    focusable="false"
-    height="16"
-    overflow="visible"
-    style="vertical-align: text-bottom;"
-    viewBox="0 0 16 16"
-    width="16"
-  >
-    <path
-      d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-    />
-  </svg>
-  <div
-    class="absolute left-[-80px] z-10 w-30 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout"
-  >
-    <div
-      class="text-left text-xs text-gitify-font"
-    >
-      This is some tooltip text
-    </div>
-  </div>
-</button>
-`;
-
-exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter / leave 2`] = `
-<button
-  aria-label="test"
-  class="relative"
-  data-testid="tooltip-test"
-  id="test"
-  type="button"
->
-  <svg
-    aria-hidden="true"
-    class="octicon octicon-question text-gitify-tooltip-icon"
-    display="inline-block"
-    fill="currentColor"
-    focusable="false"
-    height="16"
-    overflow="visible"
-    style="vertical-align: text-bottom;"
-    viewBox="0 0 16 16"
-    width="16"
-  >
-    <path
-      d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-    />
-  </svg>
-</button>
-`;
-
-exports[`renderer/components/fields/Tooltip.tsx should render 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-label="test"
-        data-testid="tooltip-test"
-        id="test"
-        tabindex="0"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-question text-gitify-tooltip-icon"
-          display="inline-block"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          overflow="visible"
-          style="vertical-align: text-bottom;"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-          />
-        </svg>
-      </button>
-    </div>
-  </body>,
-  "container": <div>
-    <button
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="test"
-      data-testid="tooltip-test"
-      id="test"
-      tabindex="0"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        class="octicon octicon-question text-gitify-tooltip-icon"
-        display="inline-block"
-        fill="currentColor"
-        focusable="false"
-        height="16"
-        overflow="visible"
-        style="vertical-align: text-bottom;"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-        />
-      </svg>
-    </button>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
diff --git a/src/renderer/components/settings/NotificationSettings.test.tsx b/src/renderer/components/settings/NotificationSettings.test.tsx
index c28152685..e7e8a1ba3 100644
--- a/src/renderer/components/settings/NotificationSettings.test.tsx
+++ b/src/renderer/components/settings/NotificationSettings.test.tsx
@@ -1,6 +1,8 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { BaseStyles, ThemeProvider } from '@primer/react';
+
 import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
 import { Constants } from '../../constants';
 import { AppContext } from '../../context/App';
@@ -323,15 +325,19 @@ describe('renderer/components/settings/NotificationSettings.tsx', () => {
 
     await act(async () => {
       render(
-        <AppContext.Provider
-          value={{
-            auth: mockAuth,
-            settings: mockSettings,
-            updateSetting,
-          }}
-        >
-          <NotificationSettings />
-        </AppContext.Provider>,
+        <ThemeProvider>
+          <BaseStyles>
+            <AppContext.Provider
+              value={{
+                auth: mockAuth,
+                settings: mockSettings,
+                updateSetting,
+              }}
+            >
+              <NotificationSettings />
+            </AppContext.Provider>
+          </BaseStyles>
+        </ThemeProvider>,
       );
     });
 

From 64ac44c392478922449579afbab60a84648cfee6 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Thu, 16 Oct 2025 11:37:27 -0700
Subject: [PATCH 4/4] feat(settings): improve tooltips

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/renderer/components/fields/Tooltip.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx
index 7f7f97c64..f791baa5a 100644
--- a/src/renderer/components/fields/Tooltip.tsx
+++ b/src/renderer/components/fields/Tooltip.tsx
@@ -14,8 +14,6 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
   return (
     <AnchoredOverlay
       align="center"
-      onClose={() => setShowTooltip(false)}
-      onOpen={() => setShowTooltip(true)}
       open={showTooltip}
       renderAnchor={(anchorProps) => (
         <button