UI: Add title attribute (popups) to icon elements

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>

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); };

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 {