feat: use floating-ui for better popover positioning

2022-07-13 15:01:50 -07:00
parent c1b8fe1221
commit ffe22689eb
3 changed files with 16 additions and 7 deletions
--- a/assets/js/popover.js
+++ b/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", () => {