add info tooltip

w-gao · Mar 13, 2023 · 19fda57 · 19fda57
1 parent 0315eb7
commit 19fda57
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 0 deletions.
diff --git a/packages/web/src/style.css b/packages/web/src/style.css
@@ -69,6 +69,7 @@ body {
 }
 
 .button-container > button {
+  cursor: pointer;
   padding: 2px 5px;
   width: 35px;
 }
@@ -78,3 +79,56 @@ body {
   width: 100%;
   height: 500px;
 }
+
+.tooltip {
+  display: inline-block;
+  position: relative;
+}
+
+.tooltip::after {
+  display: inline-block;
+  cursor: pointer;
+  content: '?';
+  margin-left: 6px;
+  width: 20px;
+  height: 20px;
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: bold;
+  background: #f0f0f0;
+  text-decoration: none;
+  text-align: center;
+  border: 1px solid;
+  border-radius: 50%;
+}
+
+.tooltip > .content {
+  display: none;
+  margin-left: 10px;
+  padding: 0 10px;
+  /* top: 50%;
+  left: 100%;
+  transform: translate(0, -50%); */
+  top: 40px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  min-width: 300px;
+  background-color: #f0f0f0;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 14px;
+  border-radius: 8px;
+  position: absolute;
+  z-index: 999999;
+  box-sizing: border-box;
+  box-shadow: 0 1px 8px rgba(0,0,0,0.5);
+}
+
+.tooltip:hover > .content {
+  display: block;
+}
+
+@media only screen and (max-width: 425px)  {
+  .tooltip {
+    display: none;
+  }
+}
diff --git a/packages/web/src/ui/components.ts b/packages/web/src/ui/components.ts
@@ -134,24 +134,28 @@ export class Header implements UICallbacksFn {
 
         const leftButton = document.createElement("button")
         leftButton.innerHTML = "←"
+        leftButton.setAttribute("title", "KeyA")
         leftButton.addEventListener("click", () =>
             this.handleButtonClick("KeyA")
         )
 
         const rightButton = document.createElement("button")
         rightButton.innerHTML = "→"
+        rightButton.setAttribute("title", "KeyD")
         rightButton.addEventListener("click", () =>
             this.handleButtonClick("KeyD")
         )
 
         const upButton = document.createElement("button")
         upButton.innerHTML = "↑"
+        upButton.setAttribute("title", "ArrowUp")
         upButton.addEventListener("click", () =>
             this.handleButtonClick("ArrowUp")
         )
 
         const downButton = document.createElement("button")
         downButton.innerHTML = "↓"
+        downButton.setAttribute("title", "ArrowDown")
         downButton.addEventListener("click", () =>
             this.handleButtonClick("ArrowDown")
         )
@@ -161,6 +165,22 @@ export class Header implements UICallbacksFn {
         buttonContainer.appendChild(upButton)
         buttonContainer.appendChild(downButton)
 
+        const tooltip = document.createElement("div")
+        tooltip.setAttribute("class", "tooltip")
+        tooltip.innerHTML = `
+        <div class="content">
+            <p>Select a graph above and use the arrow keys on the left to navigate the graph, or use keyboard shortcuts:</p>
+            <ul>
+                <li>A and D: left and right</li>
+                <li>W and S: forward and backward</li>
+                <li>R and F: up and down</li>
+                <li>↑ and ↓: cycle through paths</li>
+                <li>hover to select node</li>
+            <ul>
+        </div>
+        `
+        buttonContainer.appendChild(tooltip)
+
         this.element.appendChild(buttonContainer)
 
         this.statusBarElement = document.createElement("div")