change requests to change from 'advanced' -> 'settings' and to use tooltips rather than grey text below inputs.

frontend/public/locales/en-GB/translation.json

@@ -1383,11 +1383,46 @@
     "tags": "cleanup,streamline,non-content,organize",
     "title": "Remove Blanks",
     "header": "Remove Blank Pages",
-    "threshold": "Pixel Whiteness Threshold:",
+    "settings": {
-    "thresholdDesc": "Threshold for determining how white a white pixel must be to be classed as 'White'. 0 = Black, 255 pure white.",
+      "title": "Settings"
-    "whitePercent": "White Percent (%):",
+    },
-    "whitePercentDesc": "Percent of page that must be 'white' pixels to be removed",
+    "threshold": {
-    "submit": "Remove Blanks"
+      "label": "Pixel Whiteness Threshold"
+    },
+    "whitePercent": {
+      "label": "White Percentage Threshold",
+      "unit": "%"
+    },
+    "includeBlankPages": {
+      "label": "Include detected blank pages"
+    },
+    "tooltip": {
+      "header": {
+        "title": "Remove Blank Pages Settings"
+      },
+      "threshold": {
+        "title": "Pixel Whiteness Threshold",
+        "text": "Controls how white a pixel must be to be considered 'white'. This helps determine what counts as a blank area on the page.",
+        "bullet1": "0 = Pure black (most restrictive)",
+        "bullet2": "128 = Medium grey",
+        "bullet3": "255 = Pure white (least restrictive)"
+      },
+      "whitePercent": {
+        "title": "White Percentage Threshold",
+        "text": "Sets the minimum percentage of white pixels required for a page to be considered blank and removed.",
+        "bullet1": "Lower values (e.g., 80%) = More pages removed",
+        "bullet2": "Higher values (e.g., 95%) = Only very blank pages removed",
+        "bullet3": "Use higher values for documents with light backgrounds"
+      },
+      "includeBlankPages": {
+        "title": "Include Detected Blank Pages",
+        "text": "When enabled, creates a separate PDF containing all the blank pages that were detected and removed from the original document.",
+        "bullet1": "Useful for reviewing what was removed",
+        "bullet2": "Helps verify the detection accuracy",
+        "bullet3": "Can be disabled to reduce output file size"
+      }
+    },
+    "submit": "Remove blank pages"
   },
   "removeAnnotations": {
     "tags": "comments,highlight,notes,markup,remove",

frontend/public/locales/en-US/translation.json

@@ -1013,11 +1013,46 @@
     "tags": "cleanup,streamline,non-content,organize",
     "title": "Remove Blanks",
     "header": "Remove Blank Pages",
-    "threshold": "Pixel Whiteness Threshold:",
+    "settings": {
-    "thresholdDesc": "Threshold for determining how white a white pixel must be to be classed as 'White'. 0 = Black, 255 pure white.",
+      "title": "Settings"
-    "whitePercent": "White Percent (%):",
+    },
-    "whitePercentDesc": "Percent of page that must be 'white' pixels to be removed",
+    "threshold": {
-    "submit": "Remove Blanks"
+      "label": "Pixel Whiteness Threshold"
+    },
+    "whitePercent": {
+      "label": "White Percentage Threshold",
+      "unit": "%"
+    },
+    "includeBlankPages": {
+      "label": "Include detected blank pages"
+    },
+    "tooltip": {
+      "header": {
+        "title": "Remove Blank Pages Settings"
+      },
+      "threshold": {
+        "title": "Pixel Whiteness Threshold",
+        "text": "Controls how white a pixel must be to be considered 'white'. This helps determine what counts as a blank area on the page.",
+        "bullet1": "0 = Pure black (most restrictive)",
+        "bullet2": "128 = Medium gray",
+        "bullet3": "255 = Pure white (least restrictive)"
+      },
+      "whitePercent": {
+        "title": "White Percentage Threshold",
+        "text": "Sets the minimum percentage of white pixels required for a page to be considered blank and removed.",
+        "bullet1": "Lower values (e.g., 80%) = More pages removed",
+        "bullet2": "Higher values (e.g., 95%) = Only very blank pages removed",
+        "bullet3": "Use higher values for documents with light backgrounds"
+      },
+      "includeBlankPages": {
+        "title": "Include Detected Blank Pages",
+        "text": "When enabled, creates a separate PDF containing all the blank pages that were detected and removed from the original document.",
+        "bullet1": "Useful for reviewing what was removed",
+        "bullet2": "Helps verify the detection accuracy",
+        "bullet3": "Can be disabled to reduce output file size"
+      }
+    },
+    "submit": "Remove blank pages"
   },
   "removeAnnotations": {
     "tags": "comments,highlight,notes,markup,remove",

frontend/src/components/tools/removeBlanks/RemoveBlanksSettings.tsx

@@ -1,4 +1,4 @@
-import { Stack, Text, Checkbox } from "@mantine/core";
+import { Stack, Checkbox } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import NumberInputWithUnit from "../shared/NumberInputWithUnit";
 import { RemoveBlanksParameters } from "../../../hooks/tools/removeBlanks/useRemoveBlanksParameters";
@@ -14,7 +14,6 @@ const RemoveBlanksSettings = ({ parameters, onParameterChange, disabled = false
 
   return (
     <Stack gap="md">
-      <Stack gap="xs">
       <NumberInputWithUnit
         label={t('removeBlanks.threshold.label', 'Pixel Whiteness Threshold')}
         value={parameters.threshold}
@@ -24,14 +23,9 @@ const RemoveBlanksSettings = ({ parameters, onParameterChange, disabled = false
         max={255}
         disabled={disabled}
       />
-        <Text size="xs" c="dimmed">
-          {t('removeBlanks.threshold.desc', "Threshold for determining how white a white pixel must be to be classed as 'White'. 0 = Black, 255 pure white.")}
-        </Text>
-      </Stack>
 
-      <Stack gap="xs">
       <NumberInputWithUnit
-          label={t('removeBlanks.whitePercent.label', 'White Percent')}
+        label={t('removeBlanks.whitePercent.label', 'White Percentage Threshold')}
         value={parameters.whitePercent}
         onChange={(v) => onParameterChange('whitePercent', typeof v === 'string' ? Number(v) : v)}
         unit={t('removeBlanks.whitePercent.unit', '%')}
@@ -39,27 +33,14 @@ const RemoveBlanksSettings = ({ parameters, onParameterChange, disabled = false
         max={100}
         disabled={disabled}
       />
-        <Text size="xs" c="dimmed">
-          {t('removeBlanks.whitePercent.desc', "Percent of page that must be 'white' pixels to be removed")}
-        </Text>
-      </Stack>
 
-      <Stack gap="xs">
       <Checkbox
         checked={parameters.includeBlankPages}
         onChange={(event) => onParameterChange('includeBlankPages', event.currentTarget.checked)}
         disabled={disabled}
-          label={
+        label={t('removeBlanks.includeBlankPages.label', 'Include detected blank pages')}
-            <div>
-              <Text size="sm">{t('removeBlanks.includeBlankPages.label', 'Include detected blank pages')}</Text>
-              <Text size="xs" c="dimmed">
-                {t('removeBlanks.includeBlankPages.desc', 'Include the detected blank pages as a separate PDF in the output')}
-              </Text>
-            </div>
-          }
       />
     </Stack>
-    </Stack>
   );
 };
 

frontend/src/components/tooltips/useRemoveBlanksTips.ts

@@ -0,0 +1,41 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+export const useRemoveBlanksTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("removeBlanks.tooltip.header.title", "Remove Blank Pages Settings"),
+    },
+    tips: [
+      {
+        title: t("removeBlanks.tooltip.threshold.title", "Pixel Whiteness Threshold"),
+        description: t("removeBlanks.tooltip.threshold.text", "Controls how white a pixel must be to be considered 'white'. This helps determine what counts as a blank area on the page."),
+        bullets: [
+          t("removeBlanks.tooltip.threshold.bullet1", "0 = Pure black (most restrictive)"),
+          t("removeBlanks.tooltip.threshold.bullet2", "128 = Medium gray"),
+          t("removeBlanks.tooltip.threshold.bullet3", "255 = Pure white (least restrictive)")
+        ]
+      },
+      {
+        title: t("removeBlanks.tooltip.whitePercent.title", "White Percentage Threshold"),
+        description: t("removeBlanks.tooltip.whitePercent.text", "Sets the minimum percentage of white pixels required for a page to be considered blank and removed."),
+        bullets: [
+          t("removeBlanks.tooltip.whitePercent.bullet1", "Lower values (e.g., 80%) = More pages removed"),
+          t("removeBlanks.tooltip.whitePercent.bullet2", "Higher values (e.g., 95%) = Only very blank pages removed"),
+          t("removeBlanks.tooltip.whitePercent.bullet3", "Use higher values for documents with light backgrounds")
+        ]
+      },
+      {
+        title: t("removeBlanks.tooltip.includeBlankPages.title", "Include Detected Blank Pages"),
+        description: t("removeBlanks.tooltip.includeBlankPages.text", "When enabled, creates a separate PDF containing all the blank pages that were detected and removed from the original document."),
+        bullets: [
+          t("removeBlanks.tooltip.includeBlankPages.bullet1", "Useful for reviewing what was removed"),
+          t("removeBlanks.tooltip.includeBlankPages.bullet2", "Helps verify the detection accuracy"),
+          t("removeBlanks.tooltip.includeBlankPages.bullet3", "Can be disabled to reduce output file size")
+        ]
+      }
+    ]
+  };
+};

frontend/src/tools/RemoveBlanks.tsx

@@ -6,9 +6,11 @@ import { useBaseTool } from "../hooks/tools/shared/useBaseTool";
 import { useRemoveBlanksParameters } from "../hooks/tools/removeBlanks/useRemoveBlanksParameters";
 import { useRemoveBlanksOperation } from "../hooks/tools/removeBlanks/useRemoveBlanksOperation";
 import RemoveBlanksSettings from "../components/tools/removeBlanks/RemoveBlanksSettings";
+import { useRemoveBlanksTips } from "../components/tooltips/useRemoveBlanksTips";
 
 const RemoveBlanks = (props: BaseToolProps) => {
   const { t } = useTranslation();
+  const tooltipContent = useRemoveBlanksTips();
 
   const base = useBaseTool(
     'remove-blanks',
@@ -18,12 +20,12 @@ const RemoveBlanks = (props: BaseToolProps) => {
   );
 
   // Step expansion state management
-  const [expandedStep, setExpandedStep] = useState<"files" | "advanced" | null>("files");
+  const [expandedStep, setExpandedStep] = useState<"files" | "settings" | null>("files");
 
-  // Auto-expand advanced when files are selected
+  // Auto-expand settings when files are selected
   useEffect(() => {
     if (base.selectedFiles.length > 0 && expandedStep === "files") {
-      setExpandedStep("advanced");
+      setExpandedStep("settings");
     }
   }, [base.selectedFiles.length, expandedStep]);
 
@@ -42,12 +44,12 @@ const RemoveBlanks = (props: BaseToolProps) => {
     />
   );
 
-  const handleAdvancedClick = () => {
+  const handleSettingsClick = () => {
     if (base.hasResults) {
       base.handleSettingsReset();
     } else {
       if (!base.hasFiles) return; 
-      setExpandedStep(expandedStep === "advanced" ? null : "advanced");
+      setExpandedStep(expandedStep === "settings" ? null : "settings");
     }
   };
 
@@ -58,10 +60,11 @@ const RemoveBlanks = (props: BaseToolProps) => {
     },
     steps: [
       {
-        title: t("removeBlanks.advanced.title", "Advanced"),
+        title: t("removeBlanks.settings.title", "Settings"),
-        isCollapsed: expandedStep !== "advanced",
+        isCollapsed: expandedStep !== "settings",
-        onCollapsedClick: handleAdvancedClick,
+        onCollapsedClick: handleSettingsClick,
         content: settingsContent,
+        tooltip: tooltipContent,
       },
     ],
     executeButton: {