feat: use floating-ui for better popover positioning

assets/js/popover.js

@@ -46,7 +46,18 @@ function initPopover(baseURL, useContextualBacklinks, renderLatex) {
               throwOnError: false
             })
           }
+
           li.addEventListener("mouseover", () => {
+            // fix tooltip positioning
+            window.FloatingUIDOM.computePosition(li, el, {
+              middleware: [window.FloatingUIDOM.offset(15), window.FloatingUIDOM.inline(), window.FloatingUIDOM.shift()],
+            }).then(({ x, y }) => {
+              Object.assign(el.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+              })
+            })
+
             el.classList.add("visible")
           })
           li.addEventListener("mouseout", () => {

assets/styles/base.scss

@@ -389,7 +389,7 @@ header {
     cursor: pointer;
     & > p {
       display: inline;
-      padding-left: 0.5em;
+      padding: 0 0.5em 0 1em;
     }
   }
 
@@ -534,12 +534,10 @@ header {
   1% {
     display: inline-block;
     opacity: 0;
-    transform: translate(-50%, 40%);
   }
   100% {
     opacity: 1;
     visibility: visible;
-    transform: translate(-50%, 20%);
   }
 }
 
@@ -550,9 +548,9 @@ header {
   display: none;
   background-color: var(--light);
   padding: 1em;
+  margin: 1em;
   border: 1px solid var(--outlinegray);
   border-radius: 5px;
-  transform: translate(-50%, 40%);
   pointer-events: none;
   transition: opacity 0.2s ease, transform 0.2s ease;
   user-select: none;
@@ -566,7 +564,6 @@ header {
   &.visible {
     opacity: 1;
     visibility: visible;
-    transform: translate(-50%, 20%);
     display: inline-block;
     animation: dropin 0.2s ease;
   }
@@ -590,8 +587,6 @@ header {
   }
 }
 
-
-
 #contact_buttons ul {
   list-style-type: none;
 

layouts/partials/head.html

@@ -44,6 +44,9 @@
   <script src="{{$darkMode.Permalink}}"></script>
   {{partial "katex.html" .}}
 
+    
+  <script src="https://unpkg.com/@floating-ui/core@0.7.3"></script>
+  <script src="https://unpkg.com/@floating-ui/dom@0.5.4"></script>
   {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" |
   resources.Minify }}
   <script src="{{$popover.Permalink}}"></script>