feat(settings): improve tooltips

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

Author: setchy

src/renderer/components/fields/Tooltip.tsx

@@ -9,20 +9,28 @@ 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-[-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>

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>
           }
         />

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>

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>

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()}
         />