Refactor & document tooltip code

js/index.css

@@ -36,7 +36,7 @@ body {
 }
 
 #logo {
-  padding: 0 32px;
+  padding: 0 24px;
 }
 
 #logo img {

js/index.js

@@ -9,7 +9,7 @@ import "./index.css";
 // RFB holds the API to connect and communicate with a VNC server
 import RFB from "@novnc/novnc/core/rfb";
 
-import { setupTooltip } from "./setupTooltip";
+import { setupTooltip } from "./tooltip";
 
 // When this function is called we have successfully connected to a server
 function connectedToServer() {
@@ -52,7 +52,6 @@ rfb.scaleViewport = true;
 rfb.background = "var(--jupyter-medium-dark-grey)";
 
 // Clipboard
-
 function clipboardReceive(e) {
   document.getElementById("clipboard-text").value = e.detail.text;
 }

js/setupTooltip.js → js/tooltip.js

@@ -1,14 +1,19 @@
+/**
+ * Setup simplest popover possible to provide popovers.
+ *
+ * Mostly follows https://floating-ui.com/docs/tutorial
+ */
 import { computePosition, flip, shift, offset, arrow } from "@floating-ui/dom";
 
 /**
- *
- * @param {Element} button
+ * Setup trigger element to toggle showing / hiding tooltip element
+ * @param {Element} trigger
  * @param {Element} tooltip
  */
-export function setupTooltip(button, tooltip) {
-  const arrowElement = document.querySelector(".arrow");
+export function setupTooltip(trigger, tooltip) {
+  const arrowElement = tooltip.querySelector(".arrow");
   function updatePosition() {
-    computePosition(button, tooltip, {
+    computePosition(trigger, tooltip, {
       placement: "bottom",
       middleware: [
         offset(6),
@@ -50,14 +55,5 @@ export function setupTooltip(button, tooltip) {
     updatePosition();
   }
 
-  function hideTooltip() {
-    tooltip.style.display = "";
-  }
-
-  [
-    ["click", toggleTooltip],
-    ["blur", hideTooltip],
-  ].forEach(([event, listener]) => {
-    button.addEventListener(event, listener);
-  });
+  trigger.addEventListener("click", toggleTooltip);
 }