Add popup help to elements

2026-03-27 08:29:11 +00:00
parent b8d3dc48ab
commit ea381fe433
11 changed files with 233 additions and 4 deletions
--- a/www/index.html
+++ b/www/index.html
@@ -151,10 +151,50 @@
      z-index: 100; transition: opacity 0.4s;
    }
    #loader.hidden { opacity: 0; pointer-events: none; }
+
+    #tooltip {
+      position: fixed;
+      z-index: 200;
+      max-width: 320px;
+      background: #1a1e2c;
+      border: 1px solid #3b4560;
+      border-radius: 8px;
+      padding: 12px 14px;
+      font-size: 0.72rem;
+      line-height: 1.65;
+      color: #c8d0e0;
+      pointer-events: none;
+      box-shadow: 0 6px 28px rgba(0,0,0,0.75);
+      display: none;
+    }
+    #tooltip h2 {
+      font-size: 0.78rem;
+      color: #e8eaf6;
+      margin-bottom: 6px;
+      letter-spacing: 0.04em;
+    }
+    #tooltip strong { color: #a5d8ff; }
+    #tooltip code {
+      background: rgba(255,255,255,0.08);
+      border-radius: 3px;
+      padding: 0 3px;
+      font-size: 0.68rem;
+      color: #94e2d5;
+    }
+    #tooltip blockquote {
+      border-left: 2px solid #3b4560;
+      margin: 6px 0 0;
+      padding-left: 8px;
+      color: #8899aa;
+    }
+    #tooltip ul {
+      margin: 4px 0 0 14px;
+    }
  </style>
 </head>
 <body>
  <div id="loader">Loading WASM module…</div>
+  <div id="tooltip"></div>

  <header>Analogue Synth Visualiser</header>