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/shared/tooltip/TooltipContent.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import styles from './Tooltip.module.css';
+
+export interface TooltipTip {
+  title?: string;
+  description?: string;
+  bullets?: string[];
+  body?: React.ReactNode;
+}
+
+interface TooltipContentProps {
+  content?: React.ReactNode;
+  tips?: TooltipTip[];
+}
+
+export const TooltipContent: React.FC<TooltipContentProps> = ({
+  content,
+  tips,
+}) => {
+  return (
+    <div
+      className={`${styles['tooltip-body']}`}
+      style={{
+        color: 'var(--text-primary)',
+        padding: '16px',
+        fontSize: '14px',
+        lineHeight: '1.6'
+      }}
+    >
+      <div style={{ color: 'var(--text-primary)' }}>
+        {tips ? (
+          <>
+            {tips.map((tip, index) => (
+              <div key={index} style={{ marginBottom: index < tips.length - 1 ? '24px' : '0' }}>
+                {tip.title && (
+                  <div style={{
+                    display: 'inline-block',
+                    backgroundColor: 'var(--tooltip-title-bg)',
+                    color: 'var(--tooltip-title-color)',
+                    padding: '6px 12px',
+                    borderRadius: '16px',
+                    fontSize: '12px',
+                    fontWeight: '600',
+                    marginBottom: '12px'
+                  }}>
+                    {tip.title}
+                  </div>
+                )}
+                {tip.description && (
+                  <p style={{ margin: '0 0 12px 0', color: 'var(--text-secondary)', fontSize: '13px' }} dangerouslySetInnerHTML={{ __html: tip.description }} />
+                )}
+                {tip.bullets && tip.bullets.length > 0 && (
+                  <ul style={{ margin: '0', paddingLeft: '16px', color: 'var(--text-secondary)', fontSize: '13px' }}>
+                    {tip.bullets.map((bullet, bulletIndex) => (
+                      <li key={bulletIndex} style={{ marginBottom: '6px' }} dangerouslySetInnerHTML={{ __html: bullet }} />
+                    ))}
+                  </ul>
+                )}
+                {tip.body && (
+                  <div style={{ marginTop: '12px' }}>
+                    {tip.body}
+                  </div>
+                )}
+              </div>
+            ))}
+            {content && (
+              <div style={{ marginTop: '24px' }}>
+                {content}
+              </div>
+            )}
+          </>
+        ) : (
+          content
+        )}
+      </div>
+    </div>
+  );
+};