From 28e89a373f07627e53576f6a131b27b93eae76b5 Mon Sep 17 00:00:00 2001
From: Omar Ahmed Hassan <98468609+omar-ahmed42@users.noreply.github.com>
Date: Mon, 20 Jan 2025 14:13:52 +0200
Subject: [PATCH] Fix redaction buttons tooltips (#2750)

# Description of Changes

#### Changes:
- Button tooltip text wrap-ability for some buttons.
- Show tooltip for disabled pdf-img on hover.

## UI Changes:

#### Text-wrap when necessary for box redaction:
- Before:

![image](https://github.com/user-attachments/assets/12438dd8-799a-4cac-8221-f2063ec197f4)

- After:

![image](https://github.com/user-attachments/assets/d914d564-c7a3-4815-a195-3731489dd4b7)

#### Displaying tooltip text next to buttons when the button is
displayed as column to the left side of the screen:
- Before:

![image](https://github.com/user-attachments/assets/7661864b-f955-492f-af29-492510630b32)

- After:

![image](https://github.com/user-attachments/assets/6c8fead6-18f6-4b0f-a528-c2560392b6f8)

#### Showing tooltip for pdf to image option when it is disabled by the
user (red button)
- Before:

![image](https://github.com/user-attachments/assets/a531cfde-1fcf-4351-aee1-2f6079b0aed4)

- After:

![image](https://github.com/user-attachments/assets/85ff0e38-5d15-4d03-81db-81935e346676)

#### Wrap and hyphenate palette tooltip (Hyphenation can be found in the
German/Deutsch screenshots below)
- Before:

![image](https://github.com/user-attachments/assets/9ff678db-046d-434e-9083-450df8a7a962)

- After:

![image](https://github.com/user-attachments/assets/f9d8a674-d598-4029-b0dc-143112daa4b6)

##### In German/Deutsch UI:
Before:

![image](https://github.com/user-attachments/assets/19523bd4-718c-4637-a5f9-3e966de4443a)

After:

![image](https://github.com/user-attachments/assets/3291924a-1787-447a-b392-2bb07a165f31)


Closes #(issue_number)

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/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/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] 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/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

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

### Testing (if applicable)

- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.
---
 src/main/resources/static/css/redact.css      |  4 ++++
 .../static/pdfjs-legacy/css/viewer-redact.css | 20 +++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/main/resources/static/css/redact.css b/src/main/resources/static/css/redact.css
index 4c9a8d74..05a79678 100644
--- a/src/main/resources/static/css/redact.css
+++ b/src/main/resources/static/css/redact.css
@@ -126,6 +126,10 @@ html {
   border-color: rgba(6, 114, 197, 0.82) !important;
 }
 
+#pdfToImageBtn:hover .btn-tooltip {
+  display: block;
+}
+
 #redactionsPaletteContainer {
   height: var(--toolButton-height);
   width: var(--toolButton-width);
diff --git a/src/main/resources/static/pdfjs-legacy/css/viewer-redact.css b/src/main/resources/static/pdfjs-legacy/css/viewer-redact.css
index f19dcd1b..dfe969bb 100644
--- a/src/main/resources/static/pdfjs-legacy/css/viewer-redact.css
+++ b/src/main/resources/static/pdfjs-legacy/css/viewer-redact.css
@@ -4919,6 +4919,26 @@ dialog :link {
     left: 3px;
     top: var(--toolbar-height);
   }
+
+  #toolbarViewerRight > div.splitToolbarButton .btn-tooltip {
+    bottom: unset !important;
+    left: 100%;
+  }
+
+  #man-shape-redact {
+    position: relative;
+  }
+
+  #man-shape-redact .btn-tooltip {
+    bottom: 100%;
+    left: -5px;
+    white-space: normal !important;
+  }
+
+  #redactionsPaletteContainer .btn-tooltip {
+    white-space: normal !important;
+    hyphens: auto;
+  }
 }
 
 @media (max-width: 885px) {