feat: plugin config param tooltips

.cspell.json

@@ -1,12 +1,41 @@
 {
   "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
   "version": "0.2",
-  "ignorePaths": ["**/*.json", "**/*.css", "node_modules", "**/*.log"],
+  "ignorePaths": [
+    "**/*.json",
+    "**/*.css",
+    "node_modules",
+    "**/*.log"
+  ],
   "useGitignore": true,
   "language": "en",
-  "words": ["dataurl", "devpool", "outdir", "servedir"],
-  "dictionaries": ["typescript", "node", "software-terms"],
-  "import": ["@cspell/dict-typescript/cspell-ext.json", "@cspell/dict-node/cspell-ext.json", "@cspell/dict-software-terms"],
-  "ignoreRegExpList": ["[0-9a-fA-F]{6}"],
-  "ignoreWords": ["ubiquibot", "Supabase", "supabase", "SUPABASE", "sonarjs", "mischeck", "Typebox"]
-}
+  "words": [
+    "dataurl",
+    "devpool",
+    "outdir",
+    "servedir"
+  ],
+  "dictionaries": [
+    "typescript",
+    "node",
+    "software-terms"
+  ],
+  "import": [
+    "@cspell/dict-typescript/cspell-ext.json",
+    "@cspell/dict-node/cspell-ext.json",
+    "@cspell/dict-software-terms"
+  ],
+  "ignoreRegExpList": [
+    "[0-9a-fA-F]{6}"
+  ],
+  "ignoreWords": [
+    "ubiquibot",
+    "Supabase",
+    "supabase",
+    "SUPABASE",
+    "sonarjs",
+    "mischeck",
+    "Typebox",
+    "tooltiptext"
+  ]
+}

static/manifest-gui.css

@@ -306,6 +306,36 @@ button#add:active::before {
   content: "+++";
 }
 
+#manifest-gui pre {
+  margin: 0 0 16px;
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  cursor: help;
+  padding-left: 8px;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 200px;
+  background-color: #101010;
+  color: #fff;
+  text-align: center;
+  border-radius: 4px;
+  padding: 8px;
+  position: absolute;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
 .picker-select {
   width: 100%;
   padding: 8px 16px;

static/types/plugins.ts

@@ -12,6 +12,7 @@ export interface Uses {
 }
 
 export interface ManifestPreDecode extends Manifest {
+  manifest: Manifest;
   actionUrl?: string;
   workerUrl?: string;
   error?: string;
@@ -31,7 +32,8 @@ export type Manifest = {
   };
   configuration: {
     type: string;
-    default: object;
+    default: unknown;
+    description?: string;
     items?: {
       type: string;
     };

static/utils/element-helpers.ts

@@ -31,6 +31,9 @@ export function createInputRow(
   const headerCell = document.createElement("td");
   headerCell.className = "table-data-header";
   headerCell.textContent = key.replace(/([A-Z])/g, " $1");
+
+  createConfigParamTooltip(headerCell, prop);
+
   row.appendChild(headerCell);
 
   const valueCell = document.createElement("td");
@@ -111,3 +114,36 @@ export function createTextareaInput(key: string, defaultValue: object | unknown,
 
   return inputElem;
 }
+
+function createConfigParamTooltip(headerCell: HTMLElement, prop: ManifestProps) {
+  if (!prop.description) return;
+
+  const tooltip = createElement("span", { class: "tooltip", textContent: "?" });
+  const tooltipText = createElement("span", { class: "tooltiptext", textContent: prop.description });
+
+  tooltip.appendChild(tooltipText);
+  headerCell.appendChild(tooltip);
+
+  tooltip.addEventListener("mouseenter", () => {
+    const tooltipRect = tooltip.getBoundingClientRect();
+    const tooltipTextRect = tooltipText.getBoundingClientRect();
+    const spaceAbove = tooltipRect.top;
+    const spaceBelow = window.innerHeight - tooltipRect.bottom;
+
+    if (spaceBelow < tooltipTextRect.height && spaceAbove > spaceBelow) {
+      tooltipText.style.bottom = `${tooltipRect.height}px`;
+      tooltipText.style.top = "auto";
+    } else {
+      tooltipText.style.top = `${tooltipRect.height}px`;
+      tooltipText.style.bottom = "auto";
+    }
+
+    tooltipText.style.visibility = "visible";
+    tooltipText.style.opacity = "1";
+  });
+
+  tooltip.addEventListener("mouseleave", () => {
+    tooltipText.style.visibility = "hidden";
+    tooltipText.style.opacity = "0";
+  });
+}