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/tools/shared/ToolStep.tsx

@@ -2,6 +2,8 @@ import React, { createContext, useContext, useMemo, useRef } from 'react';
 import { Paper, Text, Stack, Box, Flex } from '@mantine/core';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { Tooltip } from '../../shared/Tooltip';
+import { TooltipTip } from '../../shared/tooltip/TooltipContent';
 
 interface ToolStepContextType {
   visibleStepCount: number;
@@ -20,8 +22,48 @@ export interface ToolStepProps {
   completedMessage?: string;
   helpText?: string;
   showNumber?: boolean;
+  tooltip?: {
+    content?: React.ReactNode;
+    tips?: TooltipTip[];
+    header?: {
+      title: string;
+      logo?: React.ReactNode;
+    };
+  };
 }
 
+const renderTooltipTitle = (
+  title: string,
+  tooltip: ToolStepProps['tooltip'],
+  isCollapsed: boolean
+) => {
+  if (tooltip && !isCollapsed) {
+    return (
+      <Tooltip
+        content={tooltip.content}
+        tips={tooltip.tips}
+        header={tooltip.header}
+        sidebarTooltip={true}
+      >
+        <Flex align="center" gap="xs" onClick={(e) => e.stopPropagation()}>
+          <Text fw={500} size="lg">
+            {title}
+          </Text>
+          <span className="material-symbols-rounded" style={{ fontSize: '1.2rem', color: 'var(--icon-files-color)' }}>
+            gpp_maybe
+          </span>
+        </Flex>
+      </Tooltip>
+    );
+  }
+  
+  return (
+    <Text fw={500} size="lg">
+      {title}
+    </Text>
+  );
+};
+
 const ToolStep = ({
   title,
   isVisible = true,
@@ -31,7 +73,8 @@ const ToolStep = ({
   children,
   completedMessage,
   helpText,
-  showNumber
+  showNumber,
+  tooltip
 }: ToolStepProps) => {
   if (!isVisible) return null;
 
@@ -70,9 +113,7 @@ const ToolStep = ({
               {stepNumber}
             </Text>
           )}
-          <Text fw={500} size="lg">
-            {title}
-          </Text>
+          {renderTooltipTitle(title, tooltip, isCollapsed)}
         </Flex>
         
         {isCollapsed ? (