From b00db16f9cc8a0a665c0ac1bbcd1218b8d75cfd1 Mon Sep 17 00:00:00 2001
From: Thespacemanfil <thespacemanfil@gmail.com>
Date: Thu, 23 Apr 2026 22:41:55 +0100
Subject: [PATCH 1/3] Add tooltips feature with centralized text and toggle

---
 src/App.tsx                            |  2 +-
 src/components/adjustments/Basic.tsx   |  8 +++
 src/components/adjustments/Color.tsx   | 12 +++++
 src/components/adjustments/Details.tsx |  8 +++
 src/components/adjustments/Effects.tsx | 11 +++++
 src/components/panel/SettingsPanel.tsx | 12 +++++
 src/components/ui/AppProperties.tsx    |  1 +
 src/components/ui/GlobalTooltip.tsx    |  9 +++-
 src/components/ui/Slider.tsx           |  3 ++
 src/utils/tooltipText.ts               | 68 ++++++++++++++++++++++++++
 10 files changed, 132 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/tooltipText.ts

diff --git a/src/App.tsx b/src/App.tsx
index 1fee88963..c1c3a80a2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5676,6 +5676,7 @@ function App() {
           )
         }
       />
+      <GlobalTooltip appSettings={appSettings} />
     </div>
   );
 }
@@ -5684,7 +5685,6 @@ const AppWrapper = () => (
   <ClerkProvider publishableKey={CLERK_PUBLISHABLE_KEY}>
     <ContextMenuProvider>
       <App />
-      <GlobalTooltip />
     </ContextMenuProvider>
   </ClerkProvider>
 );
diff --git a/src/components/adjustments/Basic.tsx b/src/components/adjustments/Basic.tsx
index 94da62967..1221661d6 100644
--- a/src/components/adjustments/Basic.tsx
+++ b/src/components/adjustments/Basic.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import Slider from '../ui/Slider';
 import { Adjustments, BasicAdjustment } from '../../utils/adjustments';
 import { useEffect, useRef, useState } from 'react';
+import { TOOLTIP_TEXT } from '../../utils/tooltipText';
 
 interface BasicAdjustmentsProps {
   adjustments: Adjustments;
@@ -133,6 +134,7 @@ const ToneMapperSwitch = ({
             value={exposureValue}
             trackClassName="bg-surface"
             onDragStateChange={onDragStateChange}
+            data-tooltip={TOOLTIP_TEXT.basic.toneMapperExposure}
           />
         </div>
       </div>
@@ -168,6 +170,7 @@ export default function BasicAdjustments({
         step={0.01}
         value={adjustments.brightness}
         onDragStateChange={onDragStateChange}
+        data-tooltip={TOOLTIP_TEXT.basic.brightness}
       />
       <Slider
         label="Contrast"
@@ -177,6 +180,7 @@ export default function BasicAdjustments({
         step={1}
         value={adjustments.contrast}
         onDragStateChange={onDragStateChange}
+        data-tooltip={TOOLTIP_TEXT.basic.contrast}
       />
       <Slider
         label="Highlights"
@@ -186,6 +190,7 @@ export default function BasicAdjustments({
         step={1}
         value={adjustments.highlights}
         onDragStateChange={onDragStateChange}
+        data-tooltip={TOOLTIP_TEXT.basic.highlights}
       />
       <Slider
         label="Shadows"
@@ -195,6 +200,7 @@ export default function BasicAdjustments({
         step={1}
         value={adjustments.shadows}
         onDragStateChange={onDragStateChange}
+        data-tooltip={TOOLTIP_TEXT.basic.shadows}
       />
       <Slider
         label="Whites"
@@ -204,6 +210,7 @@ export default function BasicAdjustments({
         step={1}
         value={adjustments.whites}
         onDragStateChange={onDragStateChange}
+        data-tooltip={TOOLTIP_TEXT.basic.whites}
       />
       <Slider
         label="Blacks"
@@ -213,6 +220,7 @@ export default function BasicAdjustments({
         step={1}
         value={adjustments.blacks}
         onDragStateChange={onDragStateChange}
+        data-tooltip={TOOLTIP_TEXT.basic.blacks}
       />
 
       {isForMask ? (
diff --git a/src/components/adjustments/Color.tsx b/src/components/adjustments/Color.tsx
index 7061e05ae..c7db6d30c 100644
--- a/src/components/adjustments/Color.tsx
+++ b/src/components/adjustments/Color.tsx
@@ -8,6 +8,7 @@ import { Adjustments, ColorGrading } from '../../utils/adjustments';
 import { AppSettings } from '../ui/AppProperties';
 import Text from '../ui/Text';
 import { TextColors, TextVariants, TextWeights } from '../../types/typography';
+import { TOOLTIP_TEXT } from '../../utils/tooltipText';
 
 interface ColorProps {
   color: string;
@@ -273,6 +274,7 @@ const ColorGradingPanel = ({ adjustments, setAdjustments, onDragStateChange }: C
           step={1}
           value={colorGrading.blending}
           onDragStateChange={onDragStateChange}
+          data-tooltip={TOOLTIP_TEXT.color.colorGrading.blending}
         />
         <Slider
           defaultValue={0}
@@ -283,6 +285,7 @@ const ColorGradingPanel = ({ adjustments, setAdjustments, onDragStateChange }: C
           step={1}
           value={colorGrading.balance}
           onDragStateChange={onDragStateChange}
+          data-tooltip={TOOLTIP_TEXT.color.colorGrading.balance}
         />
       </div>
     </div>
@@ -346,6 +349,7 @@ const ColorCalibrationPanel = ({ adjustments, setAdjustments, onDragStateChange
           onChange={(e: any) => handleShadowsChange(e.target.value)}
           onDragStateChange={onDragStateChange}
           trackClassName="tint-gradient-track"
+          data-tooltip={TOOLTIP_TEXT.color.colorCalibration.tint}
         />
       </div>
       <div className="mt-3">
@@ -373,6 +377,7 @@ const ColorCalibrationPanel = ({ adjustments, setAdjustments, onDragStateChange
           onChange={(e: any) => handlePrimaryChange('Hue', e.target.value)}
           onDragStateChange={onDragStateChange}
           trackClassName={`hue-slider-${trackSuffix}`}
+          data-tooltip={TOOLTIP_TEXT.color.colorCalibration.hue}
         />
         <Slider
           label="Saturation"
@@ -384,6 +389,7 @@ const ColorCalibrationPanel = ({ adjustments, setAdjustments, onDragStateChange
           onChange={(e: any) => handlePrimaryChange('Saturation', e.target.value)}
           onDragStateChange={onDragStateChange}
           trackClassName={`sat-slider-${trackSuffix}`}
+          data-tooltip={TOOLTIP_TEXT.color.colorCalibration.saturation}
         />
       </div>
     </div>
@@ -472,6 +478,7 @@ export default function ColorPanel({
           value={adjustments.temperature || 0}
           trackClassName="temperature-gradient-track"
           onDragStateChange={onDragStateChange}
+          data-tooltip={TOOLTIP_TEXT.color.whiteBalance.temperature}
         />
         <Slider
           label="Tint"
@@ -482,6 +489,7 @@ export default function ColorPanel({
           value={adjustments.tint || 0}
           trackClassName="tint-gradient-track"
           onDragStateChange={onDragStateChange}
+          data-tooltip={TOOLTIP_TEXT.color.whiteBalance.tint}
         />
       </div>
 
@@ -497,6 +505,7 @@ export default function ColorPanel({
           step={1}
           value={adjustments.vibrance || 0}
           onDragStateChange={onDragStateChange}
+          data-tooltip={TOOLTIP_TEXT.color.presence.vibrance}
         />
         <Slider
           label="Saturation"
@@ -506,6 +515,7 @@ export default function ColorPanel({
           step={1}
           value={adjustments.saturation || 0}
           onDragStateChange={onDragStateChange}
+          data-tooltip={TOOLTIP_TEXT.color.presence.saturation}
         />
       </div>
 
@@ -545,6 +555,7 @@ export default function ColorPanel({
           value={currentHsl.hue}
           trackClassName={hue_slider}
           onDragStateChange={onDragStateChange}
+          data-tooltip={TOOLTIP_TEXT.color.colorMixer.hue}
         />
         <Slider
           label="Saturation"
@@ -555,6 +566,7 @@ export default function ColorPanel({
           value={currentHsl.saturation}
           trackClassName={saturation_slider}
           onDragStateChange={onDragStateChange}
+          data-tooltip={TOOLTIP_TEXT.color.colorMixer.saturation}
         />
         <Slider
           label="Luminance"
diff --git a/src/components/adjustments/Details.tsx b/src/components/adjustments/Details.tsx
index 32852cb81..6b2e2f3df 100644
--- a/src/components/adjustments/Details.tsx
+++ b/src/components/adjustments/Details.tsx
@@ -3,6 +3,7 @@ import { Adjustments, DetailsAdjustment } from '../../utils/adjustments';
 import { AppSettings } from '../ui/AppProperties';
 import Text from '../ui/Text';
 import { TextVariants } from '../../types/typography';
+import { TOOLTIP_TEXT } from '../../utils/tooltipText';
 
 interface DetailsPanelProps {
   adjustments: Adjustments;
@@ -41,6 +42,7 @@ export default function DetailsPanel({
             step={1}
             value={adjustments.sharpness}
             onDragStateChange={onDragStateChange}
+            data-tooltip={TOOLTIP_TEXT.details.sharpening.sharpness}
           />
         </div>
       )}
@@ -58,6 +60,7 @@ export default function DetailsPanel({
             step={1}
             value={adjustments.clarity}
             onDragStateChange={onDragStateChange}
+            data-tooltip={TOOLTIP_TEXT.details.presence.clarity}
           />
           <Slider
             label="Dehaze"
@@ -67,6 +70,7 @@ export default function DetailsPanel({
             step={1}
             value={adjustments.dehaze}
             onDragStateChange={onDragStateChange}
+            data-tooltip={TOOLTIP_TEXT.details.presence.dehaze}
           />
           <Slider
             label="Structure"
@@ -76,6 +80,7 @@ export default function DetailsPanel({
             step={1}
             value={adjustments.structure}
             onDragStateChange={onDragStateChange}
+            data-tooltip={TOOLTIP_TEXT.details.presence.structure}
           />
           {!isForMask && (
             <Slider
@@ -86,6 +91,7 @@ export default function DetailsPanel({
               step={1}
               value={adjustments.centré}
               onDragStateChange={onDragStateChange}
+              data-tooltip={TOOLTIP_TEXT.details.presence.centré}
             />
           )}
         </div>
@@ -128,6 +134,7 @@ export default function DetailsPanel({
             step={1}
             value={adjustments.chromaticAberrationRedCyan}
             onDragStateChange={onDragStateChange}
+            data-tooltip={TOOLTIP_TEXT.details.chromaticAberration.redCyan}
           />
           <Slider
             label="Blue/Yellow"
@@ -139,6 +146,7 @@ export default function DetailsPanel({
             step={1}
             value={adjustments.chromaticAberrationBlueYellow}
             onDragStateChange={onDragStateChange}
+            data-tooltip={TOOLTIP_TEXT.details.chromaticAberration.blueYellow}
           />
         </div>
       )}
diff --git a/src/components/adjustments/Effects.tsx b/src/components/adjustments/Effects.tsx
index e680a8fda..2abae4f4f 100644
--- a/src/components/adjustments/Effects.tsx
+++ b/src/components/adjustments/Effects.tsx
@@ -4,6 +4,7 @@ import LUTControl from '../ui/LUTControl';
 import { AppSettings } from '../ui/AppProperties';
 import Text from '../ui/Text';
 import { TextVariants } from '../../types/typography';
+import { TOOLTIP_TEXT } from '../../utils/tooltipText';
 
 interface EffectsPanelProps {
   adjustments: Adjustments;
@@ -59,6 +60,7 @@ export default function EffectsPanel({
           step={1}
           value={adjustments.glowAmount}
           onDragStateChange={onDragStateChange}
+          data-tooltip={TOOLTIP_TEXT.effects.creative.glow}
         />
 
         <Slider
@@ -69,6 +71,7 @@ export default function EffectsPanel({
           step={1}
           value={adjustments.halationAmount}
           onDragStateChange={onDragStateChange}
+          data-tooltip={TOOLTIP_TEXT.effects.creative.halation}
         />
 
         {!isForMask && (
@@ -80,6 +83,7 @@ export default function EffectsPanel({
             step={1}
             value={adjustments.flareAmount}
             onDragStateChange={onDragStateChange}
+            data-tooltip={TOOLTIP_TEXT.effects.creative.lightFlares}
           />
         )}
       </div>
@@ -113,6 +117,7 @@ export default function EffectsPanel({
                 step={1}
                 value={adjustments.vignetteAmount}
                 onDragStateChange={onDragStateChange}
+                data-tooltip={TOOLTIP_TEXT.effects.vignette.amount}
               />
               <Slider
                 defaultValue={50}
@@ -123,6 +128,7 @@ export default function EffectsPanel({
                 step={1}
                 value={adjustments.vignetteMidpoint}
                 onDragStateChange={onDragStateChange}
+                data-tooltip={TOOLTIP_TEXT.effects.vignette.midpoint}
                 fillOrigin="min"
               />
               <Slider
@@ -133,6 +139,7 @@ export default function EffectsPanel({
                 step={1}
                 value={adjustments.vignetteRoundness}
                 onDragStateChange={onDragStateChange}
+                data-tooltip={TOOLTIP_TEXT.effects.vignette.roundness}
               />
               <Slider
                 defaultValue={50}
@@ -143,6 +150,7 @@ export default function EffectsPanel({
                 step={1}
                 value={adjustments.vignetteFeather}
                 onDragStateChange={onDragStateChange}
+                data-tooltip={TOOLTIP_TEXT.effects.vignette.feather}
                 fillOrigin="min"
               />
             </div>
@@ -161,6 +169,7 @@ export default function EffectsPanel({
                 step={1}
                 value={adjustments.grainAmount}
                 onDragStateChange={onDragStateChange}
+                data-tooltip={TOOLTIP_TEXT.effects.grain.amount}
               />
               <Slider
                 defaultValue={25}
@@ -171,6 +180,7 @@ export default function EffectsPanel({
                 step={1}
                 value={adjustments.grainSize}
                 onDragStateChange={onDragStateChange}
+                data-tooltip={TOOLTIP_TEXT.effects.grain.size}
                 fillOrigin="min"
               />
               <Slider
@@ -182,6 +192,7 @@ export default function EffectsPanel({
                 step={1}
                 value={adjustments.grainRoughness}
                 onDragStateChange={onDragStateChange}
+                data-tooltip={TOOLTIP_TEXT.effects.grain.roughness}
                 fillOrigin="min"
               />
             </div>
diff --git a/src/components/panel/SettingsPanel.tsx b/src/components/panel/SettingsPanel.tsx
index bb9adc993..251a400a8 100644
--- a/src/components/panel/SettingsPanel.tsx
+++ b/src/components/panel/SettingsPanel.tsx
@@ -809,6 +809,18 @@ export default function SettingsPanel({
                       />
                     </SettingItem>
 
+                    <SettingItem
+                      label="Tooltips"
+                      description="Show helpful tooltips when hovering over complex adjustment sliders and controls."
+                    >
+                      <Switch
+                        checked={appSettings?.enableTooltips ?? false}
+                        id="tooltips-toggle"
+                        label="Enable Tooltips"
+                        onChange={(checked) => onSettingsChange({ ...appSettings, enableTooltips: checked })}
+                      />
+                    </SettingItem>
+
                     <SettingItem label="Font" description="Change the application font.">
                       <Dropdown
                         onChange={(value: any) => onSettingsChange({ ...appSettings, fontFamily: value })}
diff --git a/src/components/ui/AppProperties.tsx b/src/components/ui/AppProperties.tsx
index cd464b76f..61f1fe3c4 100644
--- a/src/components/ui/AppProperties.tsx
+++ b/src/components/ui/AppProperties.tsx
@@ -156,6 +156,7 @@ export interface AppSettings {
   livePreviewQuality?: string;
   enableAiTagging?: boolean;
   enableExifReading?: boolean;
+  enableTooltips?: boolean;
   filterCriteria?: FilterCriteria;
   lastFolderState?: any;
   pinnedFolders?: any;
diff --git a/src/components/ui/GlobalTooltip.tsx b/src/components/ui/GlobalTooltip.tsx
index 3dc0547d0..7c8324fbd 100644
--- a/src/components/ui/GlobalTooltip.tsx
+++ b/src/components/ui/GlobalTooltip.tsx
@@ -15,7 +15,11 @@ interface TooltipData {
   isAbove: boolean;
 }
 
-export default function GlobalTooltip() {
+interface GlobalTooltipProps {
+  appSettings: { enableTooltips?: boolean } | null;
+}
+
+export default function GlobalTooltip({ appSettings }: GlobalTooltipProps) {
   const [tooltip, setTooltip] = useState<TooltipData | null>(null);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const targetRef = useRef<HTMLElement | null>(null);
@@ -83,6 +87,9 @@ export default function GlobalTooltip() {
 
       if (!el.getAttribute('data-tooltip')) return;
 
+      // Check if tooltips are enabled
+      if (appSettings?.enableTooltips === false) return;
+
       targetRef.current = el;
 
       timerRef.current = setTimeout(() => {
diff --git a/src/components/ui/Slider.tsx b/src/components/ui/Slider.tsx
index 68a6257a7..d04433ce6 100644
--- a/src/components/ui/Slider.tsx
+++ b/src/components/ui/Slider.tsx
@@ -21,6 +21,7 @@ interface SliderProps {
   trackClassName?: string;
   fillOrigin?: 'min' | 'default';
   suffix?: string;
+  'data-tooltip'?: string;
 }
 
 const DOUBLE_CLICK_THRESHOLD_MS = 300;
@@ -39,6 +40,7 @@ const Slider = ({
   trackClassName,
   fillOrigin = 'default',
   suffix = '',
+  'data-tooltip': dataTooltip,
 }: SliderProps) => {
   const [displayValue, setDisplayValue] = useState<number>(value);
   const [isDragging, setIsDragging] = useState(false);
@@ -393,6 +395,7 @@ const Slider = ({
           onDoubleClick={typeof label === 'string' ? handleReset : undefined}
           onMouseEnter={typeof label === 'string' ? () => setIsLabelHovered(true) : undefined}
           onMouseLeave={typeof label === 'string' ? () => setIsLabelHovered(false) : undefined}
+          data-tooltip={dataTooltip}
         >
           <span
             aria-hidden={isLabelHovered && typeof label === 'string'}
diff --git a/src/utils/tooltipText.ts b/src/utils/tooltipText.ts
new file mode 100644
index 000000000..e1e2f45d0
--- /dev/null
+++ b/src/utils/tooltipText.ts
@@ -0,0 +1,68 @@
+export const TOOLTIP_TEXT = {
+  basic: {
+    brightness: "Adjust the overall brightness of the image",
+    contrast: "Adjust the contrast of the image",
+    highlights: "Adjust the highlights of the image",
+    shadows: "Adjust the shadows of the image",
+    whites: "Adjust the whites of the image",
+    blacks: "Adjust the blacks of the image",
+    toneMapperExposure: "Adjust the exposure compensation for the selected tone mapper",
+  },
+  color: {
+    whiteBalance: {
+      temperature: "Adjust the color temperature from warm to cool",
+      tint: "Adjust the green-magenta tint of the image",
+    },
+    presence: {
+      vibrance: "Adjust the vibrance to boost muted colors without affecting skin tones",
+      saturation: "Adjust the overall color saturation of the image",
+    },
+    colorGrading: {
+      blending: "Control how much the color grading affects the image",
+      balance: "Balance the color grading between shadows and highlights",
+    },
+    colorCalibration: {
+      tint: "Adjust the color tint in the shadows",
+      hue: "Adjust the hue of the selected primary color",
+      saturation: "Adjust the saturation of the selected primary color",
+    },
+    colorMixer: {
+      hue: "Adjust the hue of the selected color range",
+      saturation: "Adjust the saturation of the selected color range",
+      luminance: "Adjust the luminance of the selected color range",
+    },
+  },
+  details: {
+    sharpening: {
+      sharpness: "Enhance edge definition and overall image sharpness",
+    },
+    presence: {
+      clarity: "Increase local contrast to add depth and definition",
+      dehaze: "Remove atmospheric haze and restore contrast",
+      structure: "Enhance fine details and texture in the image",
+      centré: "Local contrast enhancement centered on midtones",
+    },
+    chromaticAberration: {
+      redCyan: "Correct red-cyan chromatic aberration (color fringing)",
+      blueYellow: "Correct blue-yellow chromatic aberration (color fringing)",
+    },
+  },
+  effects: {
+    creative: {
+      glow: "Add a soft luminous glow to bright areas",
+      halation: "Simulate film halation for a dreamy, cinematic look",
+      lightFlares: "Add natural lens flare effects from bright light sources",
+    },
+    vignette: {
+      amount: "Control the intensity of the vignette effect",
+      midpoint: "Adjust where the vignette effect begins from the center",
+      roundness: "Control the shape of the vignette from circular to rectangular",
+      feather: "Control the softness of the vignette edge transition",
+    },
+    grain: {
+      amount: "Control the intensity of film grain overlay",
+      size: "Adjust the size of individual grain particles",
+      roughness: "Control the texture and irregularity of the grain pattern",
+    },
+  },
+} as const;

From ddff2c2db2672e9ba0e153f4ff175bdd630da103 Mon Sep 17 00:00:00 2001
From: Thespacemanfil <thespacemanfil@gmail.com>
Date: Thu, 23 Apr 2026 23:01:12 +0100
Subject: [PATCH 2/3] Fix tooltip toggle by adding appSettings to useEffect
 dependency

---
 src/components/ui/GlobalTooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/GlobalTooltip.tsx b/src/components/ui/GlobalTooltip.tsx
index 7c8324fbd..c5e0455c9 100644
--- a/src/components/ui/GlobalTooltip.tsx
+++ b/src/components/ui/GlobalTooltip.tsx
@@ -146,7 +146,7 @@ export default function GlobalTooltip({ appSettings }: GlobalTooltipProps) {
       clearTimer();
       stopWatch();
     };
-  }, []);
+  }, [appSettings]);
 
   return createPortal(
     <AnimatePresence mode="wait">

From f35528532bfdcb1fa533ebdbc9d57163ff040272 Mon Sep 17 00:00:00 2001
From: Thespacemanfil <thespacemanfil@gmail.com>
Date: Thu, 23 Apr 2026 23:03:06 +0100
Subject: [PATCH 3/3] Fix tooltip default behavior - only show when explicitly
 enabled

---
 src/components/ui/GlobalTooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/GlobalTooltip.tsx b/src/components/ui/GlobalTooltip.tsx
index c5e0455c9..5db43742d 100644
--- a/src/components/ui/GlobalTooltip.tsx
+++ b/src/components/ui/GlobalTooltip.tsx
@@ -88,7 +88,7 @@ export default function GlobalTooltip({ appSettings }: GlobalTooltipProps) {
       if (!el.getAttribute('data-tooltip')) return;
 
       // Check if tooltips are enabled
-      if (appSettings?.enableTooltips === false) return;
+      if (appSettings?.enableTooltips !== true) return;
 
       targetRef.current = el;