diff --git a/_includes/base.njk b/_includes/base.njk
index 48777f0..81e30ae 100644
--- a/_includes/base.njk
+++ b/_includes/base.njk
@@ -14,10 +14,10 @@
     <title>Adrian Victor{% if pageTitle or postTitle %} - {{pageTitle or postTitle}}{% endif %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="/static/main.css?fixcache=1">
-    <script src="/static/scripts/ccd.js"></script>
-    <script src="/static/scripts/music.js" defer></script>
-    <script src="/static/scripts/88x31.js" defer></script>
-    <script src="/static/scripts/tips.js" defer></script>
+    <script type="module" src="/static/scripts/ccd.js"></script>
+    <script type="module" src="/static/scripts/music.js" defer></script>
+    <script type="module" src="/static/scripts/88x31.js" defer></script>
+    <script type="module" src="/static/scripts/tips.js" defer></script>
     <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
diff --git a/static/main.css b/static/main.css
index 7ea86c0..09f0cb9 100644
--- a/static/main.css
+++ b/static/main.css
@@ -618,6 +618,16 @@ div.hs.selected {
     opacity: 0.6;
 }
 
+#fixedHint {
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: black;
+    z-index: 10;
+    padding: .2em;
+    outline: thin solid var(--theme-color);
+}
+
 #sound {
     filter: invert();
 }
diff --git a/static/scripts/tips.js b/static/scripts/tips.js
index fa46554..eb108de 100644
--- a/static/scripts/tips.js
+++ b/static/scripts/tips.js
@@ -1,15 +1,49 @@
-/* This script provides functionality similar to FL Studio's hint panel. */
-
+const body = document.querySelector('body');
 const elements = document.querySelectorAll('[data-tip]');
 const hint = document.querySelector("#headerSubtitle");
 const hintPanelDefaultText = hint.innerHTML;
+let fixedHint;
+let currentObserver;
 
 elements.forEach(el => {
-    el.addEventListener('mouseenter', function() {
-      hint.innerHTML = `${this.dataset.tip}`;
+  el.addEventListener('mouseenter', function() {
+    cleanup();
+    
+    if (currentObserver) {
+      currentObserver.disconnect();
+    }
+    
+    currentObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) {
+          fixedHint = document.createElement('p');
+          fixedHint.id = "fixedHint";
+          fixedHint.innerHTML = el.dataset.tip;
+          fixedHint.setAttribute('aria-hidden', 'true');
+          body.appendChild(fixedHint);
+        } else {
+          hint.innerHTML = el.dataset.tip;
+        }
+      })
     });
     
-    el.addEventListener('mouseleave', function() {
-      hint.innerHTML = hintPanelDefaultText;
-    });
+    hint.innerHTML = el.dataset.tip;
+    currentObserver.observe(hint);
+  });
+  
+  el.addEventListener('mouseleave', function() {
+    cleanup();
+  });
 })
+
+function cleanup() {
+  hint.innerHTML = hintPanelDefaultText;
+  hint.classList.remove('fixed');
+  if (fixedHint) {
+    fixedHint.remove();
+  }
+  if (currentObserver) {
+    currentObserver.disconnect();
+    currentObserver = null;
+  }
+}