Add tooltips using Tippy.js

package.json

@@ -151,6 +151,7 @@
     "lottie-web": "^5.9.5",
     "notyf": "^3.9.0",
     "sweetalert2": "^11.6.13",
+    "tippy.js": "^6.3.7",
     "v8-compile-cache": "^2.3.0"
   },
   "devDependencies": {

src/renderer/assets/css/demo.css

@@ -713,13 +713,6 @@ table.table-save-metadata {
     font-size: 14px;
     font-style: italic;
 }
-
-.info {
-    width: 18px;
-    height: 18px;
-    float: right;
-}
-
 .tooltipnew .tooltiptext {
     visibility: hidden;
     width: 400px;

src/renderer/assets/css/global.css

@@ -17,6 +17,15 @@
     word-break: break-all;
 }
 
+/* Tippy */
+.tippy-box[data-theme~="error"] {
+    background-color: hsl(0, 100%, 70%);
+}
+
+.tippy-box[data-theme~="warning"] {
+    background-color: hsl(57, 100%, 70%);
+}
+
 /* Global ---------------------------- */
 
 * {

src/renderer/src/stories/Table.js

@@ -6,13 +6,17 @@ import { errorHue, warningHue } from "./globals";
 import { checkStatus } from "../validation";
 import { emojiFontFamily } from "./globals";
 
+import tippy from "tippy.js";
+import "tippy.js/dist/tippy.css";
+
 const maxRows = 20;
 
 // Inject scoped stylesheet
 const styles = `
 
         ${css}
 
+
         .handsontable td[error] {
             background: hsl(${errorHue}, 100%, 90%) !important;
         }
@@ -37,11 +41,8 @@ const styles = `
         padding-left: 20px
       }
 
-      [title] .relative::after {
-        content: 'ℹ️';
-        display: inline-block;
+      .relative .info {
         margin: 0px 5px;
-        text-align: center;
         font-size: 80%;
         font-family: ${emojiFontFamily}
       }
@@ -283,7 +284,19 @@ export class Table extends LitElement {
 
         const onAfterGetHeader = function (index, TH) {
             const desc = entries[colHeaders[index]].description;
-            if (desc) TH.setAttribute("title", desc);
+            if (desc) {
+                const rel = TH.querySelector(".relative");
+                let span = rel.querySelector(".info");
+                if (!span) {
+                    span = document.createElement("span");
+                    span.classList.add("info");
+                    span.innerText = "ℹ️";
+                    rel.append(span);
+                }
+
+                if (span._tippy) span._tippy.destroy();
+                tippy(span, { content: `${desc}` });
+            }
         };
 
         const data = this.#getData();
@@ -425,17 +438,20 @@ export class Table extends LitElement {
 
         if (cell) {
             let title = "";
+            let theme = "";
             if (warnings.length) {
-                cell.setAttribute("warning", "");
-                title = warnings.map((o) => o.message).join("\n");
+                (theme = "warning"), (title = warnings.map((o) => o.message).join("\n"));
             } else cell.removeAttribute("warning");
 
             if (errors.length) {
-                cell.setAttribute("error", "");
-                title = errors.map((o) => o.message).join("\n"); // Class switching handled automatically
+                (theme = "error"), (title = errors.map((o) => o.message).join("\n")); // Class switching handled automatically
             } else cell.removeAttribute("error");
 
-            if (title) cell.title = title;
+            if (theme) cell.setAttribute(theme, "");
+
+            if (cell._tippy) cell._tippy.destroy();
+
+            if (title) tippy(cell, { content: title, theme });
         }
 
         this.#checkStatus(); // Check status after every validation update

src/renderer/src/stories/pages/Page.js

@@ -58,7 +58,7 @@ export class Page extends LitElement {
     notify = (...args) => {
         const ref = notify(...args);
         this.#notifications.push(ref);
-        return ref
+        return ref;
     };
 
     to = async (transition) => {

src/renderer/src/stories/pages/settings/SettingsPage.js

@@ -37,7 +37,7 @@ export class SettingsPage extends Page {
 
     #openNotyf = (message, type) => {
         if (this.#notification) notyf.dismiss(this.#notification);
-        return (this.#notification = this.notify(message,type));
+        return (this.#notification = this.notify(message, type));
     };
 
     beforeSave = () => {
@@ -60,8 +60,7 @@ export class SettingsPage extends Page {
         const button = new Button({
             label: "Save Changes",
             onClick: async () => {
-                if (!this.unsavedUpdates)
-                    return this.#openNotyf("All changes were already saved", "success");
+                if (!this.unsavedUpdates) return this.#openNotyf("All changes were already saved", "success");
                 this.save();
             },
         });

src/renderer/src/stories/pages/uploads/UploadsPage.js

@@ -48,11 +48,17 @@ export async function uploadToDandi(info, type = "project" in info ? "project" :
         },
         { title: "Uploading to DANDI" }
     ).catch((e) => {
-        this.notify(e.message, 'error');
+        this.notify(e.message, "error");
         throw e;
     });
 
-    if (result) this.notify(`${info.project ?? `${info[folderPathKey].length} filesystem entries`} successfully uploaded to Dandiset ${dandiset_id}`, "success");
+    if (result)
+        this.notify(
+            `${
+                info.project ?? `${info[folderPathKey].length} filesystem entries`
+            } successfully uploaded to Dandiset ${dandiset_id}`,
+            "success"
+        );
 
     return result;
 }