diff --git a/js/index.css b/js/index.css index a01c6726..3f08653c 100644 --- a/js/index.css +++ b/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); -} diff --git a/js/index.js b/js/index.js index dd96a4e7..b5bf5d95 100644 --- a/js/index.js +++ b/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() { diff --git a/js/tooltip.css b/js/tooltip.css new file mode 100644 index 00000000..dfd09771 --- /dev/null +++ b/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); +} diff --git a/js/tooltip.js b/js/tooltip.js index b4053adb..20f89de1 100644 --- a/js/tooltip.js +++ b/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