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() {
)
}
/>
+
);
}
@@ -5684,7 +5685,6 @@ const AppWrapper = () => (
-
);
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}
/>
@@ -168,6 +170,7 @@ export default function BasicAdjustments({
step={0.01}
value={adjustments.brightness}
onDragStateChange={onDragStateChange}
+ data-tooltip={TOOLTIP_TEXT.basic.brightness}
/>
{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}
/>
@@ -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}
/>
@@ -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}
/>
handlePrimaryChange('Saturation', e.target.value)}
onDragStateChange={onDragStateChange}
trackClassName={`sat-slider-${trackSuffix}`}
+ data-tooltip={TOOLTIP_TEXT.color.colorCalibration.saturation}
/>
@@ -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}
/>
@@ -497,6 +505,7 @@ export default function ColorPanel({
step={1}
value={adjustments.vibrance || 0}
onDragStateChange={onDragStateChange}
+ data-tooltip={TOOLTIP_TEXT.color.presence.vibrance}
/>
@@ -545,6 +555,7 @@ export default function ColorPanel({
value={currentHsl.hue}
trackClassName={hue_slider}
onDragStateChange={onDragStateChange}
+ data-tooltip={TOOLTIP_TEXT.color.colorMixer.hue}
/>
)}
@@ -58,6 +60,7 @@ export default function DetailsPanel({
step={1}
value={adjustments.clarity}
onDragStateChange={onDragStateChange}
+ data-tooltip={TOOLTIP_TEXT.details.presence.clarity}
/>
{!isForMask && (
)}
@@ -128,6 +134,7 @@ export default function DetailsPanel({
step={1}
value={adjustments.chromaticAberrationRedCyan}
onDragStateChange={onDragStateChange}
+ data-tooltip={TOOLTIP_TEXT.details.chromaticAberration.redCyan}
/>
)}
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}
/>
{!isForMask && (
@@ -80,6 +83,7 @@ export default function EffectsPanel({
step={1}
value={adjustments.flareAmount}
onDragStateChange={onDragStateChange}
+ data-tooltip={TOOLTIP_TEXT.effects.creative.lightFlares}
/>
)}
@@ -113,6 +117,7 @@ export default function EffectsPanel({
step={1}
value={adjustments.vignetteAmount}
onDragStateChange={onDragStateChange}
+ data-tooltip={TOOLTIP_TEXT.effects.vignette.amount}
/>
@@ -161,6 +169,7 @@ export default function EffectsPanel({
step={1}
value={adjustments.grainAmount}
onDragStateChange={onDragStateChange}
+ data-tooltip={TOOLTIP_TEXT.effects.grain.amount}
/>
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({
/>
+
+ onSettingsChange({ ...appSettings, enableTooltips: checked })}
+ />
+
+
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..5db43742d 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(null);
const timerRef = useRef | null>(null);
const targetRef = useRef(null);
@@ -83,6 +87,9 @@ export default function GlobalTooltip() {
if (!el.getAttribute('data-tooltip')) return;
+ // Check if tooltips are enabled
+ if (appSettings?.enableTooltips !== true) return;
+
targetRef.current = el;
timerRef.current = setTimeout(() => {
@@ -139,7 +146,7 @@ export default function GlobalTooltip() {
clearTimer();
stopWatch();
};
- }, []);
+ }, [appSettings]);
return createPortal(
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(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}
>