improve tooltips

pomdtr · Dec 10, 2023 · a09d60a · a09d60a
1 parent a3198de
commit a09d60a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -39,8 +39,8 @@ div#terminal {
     position: fixed;
     font-size: 13px;
     font-family: courier-new, courier, monospace;
-    border-radius: 3px;
-    padding: 3px;
+    border-radius: 5px;
+    padding: 5px;
     color: hsl(0, 0%, 0%);
     background-color: #fff;
     border: 1px solid #C8C8C8;

diff --git a/frontend/src/terminal.ts b/frontend/src/terminal.ts
@@ -68,12 +68,21 @@ async function main() {
         }
     }, {
         hover: (_, text) => {
-            if (document.getElementById('tooltip')) {
-                document.getElementById('tooltip')!.remove();
+            let tooltip = document.getElementById('tooltip');
+            if (tooltip) {
+                if (tooltip.id === `${text}-tooltip`) {
+                    return;
+                }
+
+                if (tooltip.matches(':hover')) {
+                    return;
+                }
+                tooltip.remove();
             }
 
-            const tooltip = document.createElement('div');
-            tooltip.id = 'tooltip';
+            const tooltipId = `${text}-tooltip`;
+            tooltip = document.createElement('div');
+            tooltip.id = tooltipId;
             tooltip.className = 'tooltip';
             tooltip.style.position = 'fixed';
             tooltip.innerHTML = `<a href="${text}" target="_blank">Follow link</a>`;
@@ -86,7 +95,7 @@ async function main() {
             // Add a delay of 1 second before showing the tooltip
             setTimeout(() => {
                 // check if the tooltip still exists
-                const tooltip = document.getElementById('tooltip');
+                const tooltip = document.getElementById(tooltipId);
                 if (tooltip) {
                     if (mouseX - tootlipSize.height > 0) {
                         tooltip.style.top = `${mouseY - tootlipSize.height}px`;
@@ -97,10 +106,10 @@ async function main() {
                     tooltip.style.left = `${mouseX - tootlipSize.width / 2}px`;
                     tooltip.style.visibility = 'visible';
                 }
-            }, 1500);
+            }, 1000);
         },
-        leave: () => {
-            const tooltip = document.getElementById('tooltip');
+        leave: (_, text) => {
+            const tooltip = document.getElementById(`${text}-tooltip`);
             if (tooltip && !tooltip.matches(':hover')) {
                 tooltip.remove();
                 return