Hover tools tooltips (#2290)

* Multi-tool advert on pages that share functionality * Update translation files Signed-off-by: GitHub Action <action@github.com> * Rtl CSS * Upgraded tooltips on multitool. Order selected pages list. Repositionicons. Minor additional tweaks * restore gb translations * Update translation files Signed-off-by: GitHub Action <action@github.com> * remove blankspace * Restore hover tooltips * Update translation files Signed-off-by: GitHub Action <action@github.com> --------- Signed-off-by: GitHub Action <action@github.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2024-12-21 19:08:24 +01:00 · 2024-11-21 19:33:19 +00:00 · 2024-11-21 19:33:19 +00:00 · 4ebeedc028
commit 4ebeedc028
parent b4b005bc2e
40 changed files with 139 additions and 14 deletions
--- a/src/main/resources/messages_ar_AR.properties
+++ b/src/main/resources/messages_ar_AR.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=هذه الميزة متوفرة في <a href="{0}">صفحة الأدوات المتعددة</a> لدينا. اطلع عليها للحصول على واجهة مستخدم محسّنة لكل صفحة وميزات إضافية!
--- a/src/main/resources/messages_bg_BG.properties
+++ b/src/main/resources/messages_bg_BG.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_ca_CA.properties
+++ b/src/main/resources/messages_ca_CA.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_cs_CZ.properties
+++ b/src/main/resources/messages_cs_CZ.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_da_DK.properties
+++ b/src/main/resources/messages_da_DK.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_de_DE.properties
+++ b/src/main/resources/messages_de_DE.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=Diese Funktion ist auch auf unserer <a href="{0}">PDF-Multitool-Seite</a> verfügbar. Probieren Sie sie aus, denn sie bietet eine verbesserte Benutzeroberfläche und zusätzliche Funktionen!
--- a/src/main/resources/messages_el_GR.properties
+++ b/src/main/resources/messages_el_GR.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_en_GB.properties
+++ b/src/main/resources/messages_en_GB.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_en_US.properties
+++ b/src/main/resources/messages_en_US.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_es_ES.properties
+++ b/src/main/resources/messages_es_ES.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_eu_ES.properties
+++ b/src/main/resources/messages_eu_ES.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_fr_FR.properties
+++ b/src/main/resources/messages_fr_FR.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_ga_IE.properties
+++ b/src/main/resources/messages_ga_IE.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_hi_IN.properties
+++ b/src/main/resources/messages_hi_IN.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_hr_HR.properties
+++ b/src/main/resources/messages_hr_HR.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_hu_HU.properties
+++ b/src/main/resources/messages_hu_HU.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_id_ID.properties
+++ b/src/main/resources/messages_id_ID.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_it_IT.properties
+++ b/src/main/resources/messages_it_IT.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=Questa funzione è disponibile anche nella nostra <a href="{0}">pagina multi-strumento</a>. Scoprila per un'interfaccia utente pagina per pagina migliorata e funzionalità aggiuntive!
--- a/src/main/resources/messages_ja_JP.properties
+++ b/src/main/resources/messages_ja_JP.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_ko_KR.properties
+++ b/src/main/resources/messages_ko_KR.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_nl_NL.properties
+++ b/src/main/resources/messages_nl_NL.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_no_NB.properties
+++ b/src/main/resources/messages_no_NB.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_pl_PL.properties
+++ b/src/main/resources/messages_pl_PL.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_pt_BR.properties
+++ b/src/main/resources/messages_pt_BR.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_pt_PT.properties
+++ b/src/main/resources/messages_pt_PT.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_ro_RO.properties
+++ b/src/main/resources/messages_ro_RO.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_ru_RU.properties
+++ b/src/main/resources/messages_ru_RU.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_sk_SK.properties
+++ b/src/main/resources/messages_sk_SK.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_sr_LATN_RS.properties
+++ b/src/main/resources/messages_sr_LATN_RS.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_sv_SE.properties
+++ b/src/main/resources/messages_sv_SE.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_th_TH.properties
+++ b/src/main/resources/messages_th_TH.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_tr_TR.properties
+++ b/src/main/resources/messages_tr_TR.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_uk_UA.properties
+++ b/src/main/resources/messages_uk_UA.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_vi_VN.properties
+++ b/src/main/resources/messages_vi_VN.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_zh_CN.properties
+++ b/src/main/resources/messages_zh_CN.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_zh_TW.properties
+++ b/src/main/resources/messages_zh_TW.properties
@ -949,6 +949,9 @@ multiTool.addFile=Add File
 multiTool.rotateLeft=Rotate Left
 multiTool.rotateRight=Rotate Right
 multiTool.split=Split
+multiTool.moveLeft=Move Left
+multiTool.moveRight=Move Right
+multiTool.delete=Delete

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/static/css/multi-tool.css
+++ b/src/main/resources/static/css/multi-tool.css
@ -295,7 +295,7 @@ label {
  flex-wrap: nowrap;
  width: fit-content;
  padding: 7px;
-  background-color: rgba(0, 29, 41, 0.6);
+  background-color: rgba(0, 29, 41, 0.9);
  border-radius: 3px;
  font-size: 12px;
  color: whitesmoke;
--- a/src/main/resources/static/css/pdfActions.css
+++ b/src/main/resources/static/css/pdfActions.css
@ -1,5 +1,5 @@
 .pdf-actions_button-container {
-  z-index: 2;
+  z-index: 4;
  display: flex;
  opacity: 0;
  transition: opacity 0.1s linear;
@ -46,7 +46,7 @@
  width: 80px;
  height: 100%;

-  z-index: 1;
+  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s;
 }
@ -116,6 +116,7 @@ html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-butto
  translate: 50% -50%;
  aspect-ratio: 1;
  border-radius: 100px;
+  z-index: 4;
 }

 .pdf-actions_split-file-button {
@ -125,9 +126,9 @@ html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-butto
  translate: 0 -50%;
  aspect-ratio: 1;
  border-radius: 100px;
+  z-index: 3;
 }

-
 .pdf-actions_checkbox {
  position: absolute;
  top: 5px;
@ -137,7 +138,7 @@ html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-butto
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 16px;
-  z-index: 2;
+  z-index: 3;
 }

 .hidden {
@ -150,4 +151,5 @@ html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-butto
  translate: 0% -50%;
  aspect-ratio: 1;
  border-radius: 100px;
+  z-index: 5;
 }
--- a/src/main/resources/static/js/multitool/PdfActionsManager.js
+++ b/src/main/resources/static/js/multitool/PdfActionsManager.js
@ -110,31 +110,32 @@ class PdfActionsManager {

    const moveUp = document.createElement("button");
    moveUp.classList.add("pdf-actions_move-left-button", "btn", "btn-secondary");
-    moveUp.innerHTML = `<span class="material-symbols-rounded">arrow_${leftDirection}_alt</span>`;
+    moveUp.innerHTML = `<span class="material-symbols-rounded">arrow_${leftDirection}_alt</span><span class="btn-tooltip">${window.translations.moveLeft}</span>`;
    moveUp.onclick = this.moveUpButtonCallback;
    buttonContainer.appendChild(moveUp);

    const moveDown = document.createElement("button");
    moveDown.classList.add("pdf-actions_move-right-button", "btn", "btn-secondary");
-    moveDown.innerHTML = `<span class="material-symbols-rounded">arrow_${rightDirection}_alt</span>`;
+    moveDown.innerHTML = `<span class="material-symbols-rounded">arrow_${rightDirection}_alt</span><span class="btn-tooltip">${window.translations.moveRight}</span>`;
    moveDown.onclick = this.moveDownButtonCallback;
    buttonContainer.appendChild(moveDown);

+
    const rotateCCW = document.createElement("button");
    rotateCCW.classList.add("btn", "btn-secondary");
-    rotateCCW.innerHTML = `<span class="material-symbols-rounded">rotate_left</span>`;
+    rotateCCW.innerHTML = `<span class="material-symbols-rounded">rotate_left</span><span class="btn-tooltip">${window.translations.rotateLeft}</span>`;
    rotateCCW.onclick = this.rotateCCWButtonCallback;
    buttonContainer.appendChild(rotateCCW);

    const rotateCW = document.createElement("button");
    rotateCW.classList.add("btn", "btn-secondary");
-    rotateCW.innerHTML = `<span class="material-symbols-rounded">rotate_right</span>`;
+    rotateCW.innerHTML = `<span class="material-symbols-rounded">rotate_right</span><span class="btn-tooltip">${window.translations.rotateRight}</span>`;
    rotateCW.onclick = this.rotateCWButtonCallback;
    buttonContainer.appendChild(rotateCW);

    const deletePage = document.createElement("button");
    deletePage.classList.add("btn", "btn-danger");
-    deletePage.innerHTML = `<span class="material-symbols-rounded">delete</span>`;
+    deletePage.innerHTML = `<span class="material-symbols-rounded">delete</span><span class="btn-tooltip"></span><span class="btn-tooltip">${window.translations.delete}</span>`;
    deletePage.onclick = this.deletePageButtonCallback;
    buttonContainer.appendChild(deletePage);

@ -189,19 +190,19 @@ class PdfActionsManager {

    const insertFileButton = document.createElement("button");
    insertFileButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
-    insertFileButton.innerHTML = `<span class="material-symbols-rounded">add</span>`;
+    insertFileButton.innerHTML = `<span class="material-symbols-rounded">add</span></span><span class="btn-tooltip">${window.translations.addFile}</span>`;
    insertFileButton.onclick = this.insertFileButtonCallback;
    insertFileButtonContainer.appendChild(insertFileButton);

    const splitFileButton = document.createElement("button");
    splitFileButton.classList.add("btn", "btn-primary", "pdf-actions_split-file-button");
-    splitFileButton.innerHTML = `<span class="material-symbols-rounded">cut</span>`;
+    splitFileButton.innerHTML = `<span class="material-symbols-rounded">cut</span></span><span class="btn-tooltip">${window.translations.split}</span>`;
    splitFileButton.onclick = this.splitFileButtonCallback;
    insertFileButtonContainer.appendChild(splitFileButton);

    const insertFileBlankButton = document.createElement("button");
    insertFileBlankButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-blank-button");
-    insertFileBlankButton.innerHTML = `<span class="material-symbols-rounded">insert_page_break</span>`;
+    insertFileBlankButton.innerHTML = `<span class="material-symbols-rounded">insert_page_break</span></span><span class="btn-tooltip">${window.translations.insertPageBreak}</span>`;
    insertFileBlankButton.onclick = this.insertFileBlankButtonCallback;
    insertFileButtonContainer.appendChild(insertFileBlankButton);

--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@ -136,6 +136,20 @@
    window.selectedPages = [];
    window.selectPage = false;
    window.selectAll = false;
+
+    window.translations = {
+        rotateLeft: '[[#{multiTool.rotateLeft}]]',
+        rotateRight: '[[#{multiTool.rotateRight}]]',
+        moveLeft: '[[#{multiTool.moveLeft}]]',
+        moveRight: '[[#{multiTool.moveRight}]]',
+        delete: '[[#{multiTool.delete}]]',
+        split: '[[#{multiTool.split}]]',
+        addFile: '[[#{multiTool.addFile}]]',
+        insertPageBreak:'[[#{multiTool.insertPageBreak}]]'
+    };
+
+
+
    const csvInput = document.getElementById("csv-input");
    csvInput.addEventListener("keydown", function (event) {
      if (event.key === "Enter") {
@ -177,4 +191,4 @@
  </script>
 </body>

-</html>
+</html>