Better position the help tooltip; make sure it appears on top

gorge.css

@@ -826,12 +826,16 @@ div::-webkit-scrollbar-corner {
 }
 
 .has-help {
-  
+
 }
 
 #help-tooltip {
+  position: fixed;
   color: #888;
   background: #000;
   max-width: 400px;
   font-size: 16pt;
+  z-index: 1;
+  left: 0%;
+  top: 0%;
 }

gorge.html

@@ -42,16 +42,15 @@
     <div id="resource-list"></div>
     <div id="productivity"></div>
     <button id="tasty-micro"></button>
+    <div id="help-tooltip">
+      <div id="help-tooltip-help"></div>
+    </div>
     <div id="powerup-list"></div>
     <div id="powerup-tooltip">
       <div id="powerup-tooltip-name"></div>
       <div id="powerup-tooltip-desc"></div>
     </div>
   </div>
-
-  <div id="help-tooltip">
-    <div id="help-tooltip-help"></div>
-  </div>
   <div id="upgrades-area">
     <div id="upgrades" class="title switcher-button">Upgrades</div>
     <div id="upgrade-tooltip">

gorge.js

@@ -1399,7 +1399,7 @@ function helpTooltip(element, event) {
 
   fillTooltip("help", "help", text);
 
-  let xPos = tooltip.parentElement.getBoundingClientRect().x + 450;
+  let xPos = event.clientX + 100;
 
   // wow browsers are bad