Split tooltip CSS into its own file

js/index.css

@@ -83,10 +83,6 @@ li#status-container {
   overflow: hidden;
 }
 
-.hidden {
-  display: none !important;
-}
-
 /* Clipboard */
 #clipboard-content {
   display: flex;
@@ -99,24 +95,3 @@ li#status-container {
   min-width: 500px;
   max-width: 100%;
 }
-
-.tooltip-container {
-  overflow: visible; /* Needed for the arrow to show up */
-  width: max-content;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: white;
-  color: var(--jupyter-dark-grey);
-  padding: 6px;
-  border-radius: 4px;
-  font-size: 90%;
-}
-
-.arrow {
-  position: absolute;
-  background: white;
-  width: 8px;
-  height: 8px;
-  transform: rotate(45deg);
-}

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 "./tooltip";
+import { setupTooltip } from "./tooltip.js";
 
 // When this function is called we have successfully connected to a server
 function connectedToServer() {

js/tooltip.css

@@ -0,0 +1,24 @@
+.hidden {
+  display: none !important;
+}
+
+.tooltip-container {
+  overflow: visible; /* Needed for the arrow to show up */
+  width: max-content;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: white;
+  color: var(--jupyter-dark-grey);
+  padding: 6px;
+  border-radius: 4px;
+  font-size: 90%;
+}
+
+.arrow {
+  position: absolute;
+  background: white;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+}

js/tooltip.js

@@ -4,6 +4,7 @@
  * Mostly follows https://floating-ui.com/docs/tutorial
  */
 import { computePosition, flip, shift, offset, arrow } from "@floating-ui/dom";
+import "./tooltip.css";
 
 /**
  * Setup trigger element to toggle showing / hiding tooltip element