Feature/v2/tooltips (#4112)

# Description of Changes

- added tooltips to ocr and compress
- added the tooltip component which can be used either directly, or
through the toolstep component

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/src/components/tooltips/CompressTips.ts

@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+export const CompressTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("compress.tooltip.header.title", "Compress Settings Overview")
+    },
+    tips: [
+      {
+        title: t("compress.tooltip.description.title", "Description"),
+        description: t("compress.tooltip.description.text", "Compression is an easy way to reduce your file size. Pick File Size to enter a target size and have us adjust quality for you. Pick Quality to set compression strength manually.")
+      },
+      {
+        title: t("compress.tooltip.qualityAdjustment.title", "Quality Adjustment"),
+        description: t("compress.tooltip.qualityAdjustment.text", "Drag the slider to adjust the compression strength. Lower values (1-3) preserve quality but result in larger files. Higher values (7-9) shrink the file more but reduce image clarity."),
+        bullets: [
+          t("compress.tooltip.qualityAdjustment.bullet1", "Lower values preserve quality"),
+          t("compress.tooltip.qualityAdjustment.bullet2", "Higher values reduce file size")
+        ]
+      },
+      {
+        title: t("compress.tooltip.grayscale.title", "Grayscale"),
+        description: t("compress.tooltip.grayscale.text", "Select this option to convert all images to black and white, which can significantly reduce file size especially for scanned PDFs or image-heavy documents.")
+      }
+    ]
+  };
+}; 

frontend/src/components/tooltips/OCRTips.ts

@@ -0,0 +1,36 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+export const OcrTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("ocr.tooltip.header.title", "OCR Settings Overview"),
+    },
+    tips: [
+      {
+        title: t("ocr.tooltip.mode.title", "OCR Mode"),
+        description: t("ocr.tooltip.mode.text", "Optical Character Recognition (OCR) helps you turn scanned or screenshotted pages into text you can search, copy, or highlight."),
+        bullets: [
+          t("ocr.tooltip.mode.bullet1", "Auto skips pages that already contain text layers."),
+          t("ocr.tooltip.mode.bullet2", "Force re-OCRs every page and replaces all the text."),
+          t("ocr.tooltip.mode.bullet3", "Strict halts if any selectable text is found.")
+        ]
+      },
+      {
+        title: t("ocr.tooltip.languages.title", "Languages"),
+        description: t("ocr.tooltip.languages.text", "Improve OCR accuracy by specifying the expected languages. Choose one or more languages to guide detection.")
+      },
+      {
+        title: t("ocr.tooltip.output.title", "Output"),
+        description: t("ocr.tooltip.output.text", "Decide how you want the text output formatted:"),
+        bullets: [
+          t("ocr.tooltip.output.bullet1", "Searchable PDF embeds text behind the original image."),
+          t("ocr.tooltip.output.bullet2", "HOCR XML returns a structured machine-readable file."),
+          t("ocr.tooltip.output.bullet3", "Plain-text sidecar creates a separate .txt file with raw content.")
+        ]
+      }
+    ]
+  };
+};