From 1921c0c8eb24e69c43136684026d562dccffe201 Mon Sep 17 00:00:00 2001
From: Max Berger <max@berger.name>
Date: Sun, 29 Mar 2026 22:04:03 +0200
Subject: [PATCH] UI: Add title attribute (popups) to icon elements

---
 radicale/web/internal_data/index.html              | 14 +++++++-------
 .../js/scenes/IncomingSharingScene.js              |  2 ++
 radicale/web/internal_data/js/utils/permissions.js |  3 +++
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/radicale/web/internal_data/index.html b/radicale/web/internal_data/index.html
index d7d6c4ef..a695be3d 100644
--- a/radicale/web/internal_data/index.html
+++ b/radicale/web/internal_data/index.html
@@ -71,7 +71,7 @@
         <h3 class="title" data-name="title">Title</h3>
         <small>
           <span data-name="shared-by" class="hidden">👥 shared by <span data-name="shared-by-owner"></span> &gt;</span>
-          <span data-name="transformed-from" class="hidden">Address book ⟿</span>
+          <span data-name="transformed-from" class="hidden" title="Transformed item">Address book ⟿</span>
           <span data-name="ADDRESSBOOK">Address book</span>
           <span data-name="CALENDAR_JOURNAL_TASKS">Calendar, journal and tasks</span>
           <span data-name="CALENDAR_JOURNAL">Calendar and journal</span>
@@ -155,18 +155,18 @@
             <tbody>
               <tr data-name="sharetokenrowtemplate" class="hidden">
                 <td>
-                  <button type="button" class="blue inline" data-name="edit"><img src="css/icons/edit.svg"
+                  <button type="button" class="blue inline" data-name="edit" title="Edit Share"><img src="css/icons/edit.svg"
                       class="small_icon" alt="Edit"></button>
                 </td>
                 <td><span class="pill" data-name="rw">rw</span><span class="pill" data-name="ro">ro</span><span data-name="conversion">⟿</span></td>
                 <td><input type="text" data-name="pathortoken" value="" readonly="" class="inline selectall"></td>
                 <td>
-                  <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
+                  <button type="button" class="red inline" data-name="delete" title="Delete Share"><img src="css/icons/delete.svg"
                       class="small_icon" alt="Delete"></button>
                 </td>
               </tr>
               <tr>
-                <td><button type="button" class="blue inline" data-name="sharebytoken"><img src="css/icons/new.svg"
+                <td><button type="button" class="blue inline" data-name="sharebytoken" title="New Share by Token"><img src="css/icons/new.svg"
                       class="small_icon" alt="New Share by Token"></button>
                 </td>
               </tr>
@@ -181,19 +181,19 @@
             <tbody>
               <tr data-name="sharemaprowtemplate" class="hidden">
                 <td>
-                  <button type="button" class="blue inline" data-name="edit"><img src="css/icons/edit.svg"
+                  <button type="button" class="blue inline" data-name="edit" title="Edit Share"><img src="css/icons/edit.svg"
                       class="small_icon" alt="Edit"></button>
                 </td>
                 <td><span class="pill" data-name="rw">rw</span><span class="pill" data-name="ro">ro</span><span data-name="conversion">⟿</span></td>
                 <td><input type="text" data-name="pathortoken" value="" readonly="" class="inline selectall"></td>
                 <td>
-                  <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
+                  <button type="button" class="red inline" data-name="delete" title="Delete Share"><img src="css/icons/delete.svg"
                       class="small_icon" alt="Delete"></button>
                 </td>
               </tr>
               <tr>
                 <td>
-                  <button type="button" class="blue inline" data-name="sharebymap">
+                  <button type="button" class="blue inline" data-name="sharebymap" title="New Share by Map">
                     <img src="css/icons/new.svg" class="small_icon" alt="New Share by Map">
                   </button>
                 </td>
diff --git a/radicale/web/internal_data/js/scenes/IncomingSharingScene.js b/radicale/web/internal_data/js/scenes/IncomingSharingScene.js
index e45c2aac..d7a8659d 100644
--- a/radicale/web/internal_data/js/scenes/IncomingSharingScene.js
+++ b/radicale/web/internal_data/js/scenes/IncomingSharingScene.js
@@ -132,7 +132,9 @@ export class IncomingSharingScene {
             let shown = share.HiddenByUser !== null ? !share.HiddenByUser : true;
 
             enabled_cb.checked = enabled;
+            enabled_cb.setAttribute("title", "Enabled");
             shown_cb.checked = shown;
+            shown_cb.setAttribute("title", "Shown");
             shown_cb.disabled = !enabled;
 
             enabled_cb.onchange = () => { this._toggle_share(share, node); };
diff --git a/radicale/web/internal_data/js/utils/permissions.js b/radicale/web/internal_data/js/utils/permissions.js
index 209694e4..82f6bd05 100644
--- a/radicale/web/internal_data/js/utils/permissions.js
+++ b/radicale/web/internal_data/js/utils/permissions.js
@@ -30,16 +30,19 @@ export function displayPermissionsOrConversion(conversion, permissions, node) {
   let fixedConversion = (conversion || "").toLowerCase();
   if (fixedConversion != "none" && fixedConversion != "") {
     conversionElement.classList.remove("hidden");
+    conversionElement.setAttribute("title", "Converted");
     roElement.classList.add("hidden");
     rwElement.classList.add("hidden");
   } else {
     permissions = (permissions || "").toLowerCase();
     if (permissions === "rw") {
       rwElement.classList.remove("hidden");
+      rwElement.setAttribute("title", "Read and write");
       roElement.classList.add("hidden");
       conversionElement.classList.add("hidden");
     } else if (permissions === "r") {
       roElement.classList.remove("hidden");
+      roElement.setAttribute("title", "Read-only");
       rwElement.classList.add("hidden");
       conversionElement.classList.add("hidden");
     } else {