add tooltips for colored dots in settings menu

web/public/locales/en/views/settings.json

@@ -40,6 +40,11 @@
       "profilePrefix": "{{profile}} profile: {{fields}}"
     }
   },
+  "menuDot": {
+    "overrideGlobal": "This section overrides the global configuration",
+    "overrideProfile": "This section is overridden by the {{profile}} profile",
+    "unsaved": "This section has unsaved changes"
+  },
   "menu": {
     "general": "General",
     "globalConfig": "Global configuration",

web/src/pages/Settings.tsx

@@ -103,6 +103,12 @@ import SaveAllPreviewPopover, {
   type SaveAllPreviewItem,
 } from "@/components/overlay/detail/SaveAllPreviewPopover";
 import { useRestart } from "@/api/ws";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 const allSettingsViews = [
   "uiSettings",
@@ -1386,10 +1392,20 @@ export default function Settings() {
         CAMERA_SECTION_KEYS.has(key) && status?.isOverridden;
       const showUnsavedDot = status?.hasChanges;
 
-      const dotColor =
+      const isProfileOverride =
-        status?.overrideSource === "profile" && activeProfileColor
+        status?.overrideSource === "profile" && activeProfileColor;
-          ? activeProfileColor.dot
+      const dotColor = isProfileOverride
-          : "bg-selected";
+        ? activeProfileColor.dot
+        : "bg-selected";
+
+      const overrideTooltip = isProfileOverride
+        ? t("menuDot.overrideProfile", {
+            profile: activeEditingProfile
+              ? (profileFriendlyNames.get(activeEditingProfile) ??
+                activeEditingProfile)
+              : "",
+          })
+        : t("menuDot.overrideGlobal");
 
       return (
         <div className="flex w-full min-w-0 items-center justify-between pr-4 md:pr-0">
@@ -1399,19 +1415,46 @@ export default function Settings() {
           {(showOverrideDot || showUnsavedDot) && (
             <div className="ml-2 flex shrink-0 items-center gap-2">
               {showOverrideDot && (
-                <span
+                <Tooltip>
-                  className={cn("inline-block size-2 rounded-full", dotColor)}
+                  <TooltipTrigger asChild>
-                />
+                    <span
+                      className={cn(
+                        "inline-block size-2 rounded-full",
+                        dotColor,
+                      )}
+                    />
+                  </TooltipTrigger>
+                  <TooltipPortal>
+                    <TooltipContent side="right">
+                      {overrideTooltip}
+                    </TooltipContent>
+                  </TooltipPortal>
+                </Tooltip>
               )}
               {showUnsavedDot && (
-                <span className="inline-block size-2 rounded-full bg-unsaved" />
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="inline-block size-2 rounded-full bg-unsaved" />
+                  </TooltipTrigger>
+                  <TooltipPortal>
+                    <TooltipContent side="right">
+                      {t("menuDot.unsaved")}
+                    </TooltipContent>
+                  </TooltipPortal>
+                </Tooltip>
               )}
             </div>
           )}
         </div>
       );
     },
-    [sectionStatusByKey, t, activeProfileColor],
+    [
+      sectionStatusByKey,
+      t,
+      activeProfileColor,
+      activeEditingProfile,
+      profileFriendlyNames,
+    ],
   );
 
   if (isMobile) {