diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts index 0ff6eab87..29dec1b23 100644 --- a/quartz/components/scripts/popover.inline.ts +++ b/quartz/components/scripts/popover.inline.ts @@ -1,8 +1,10 @@ import { computePosition, flip, inline, shift } from "@floating-ui/dom" import { normalizeRelativeURLs } from "../../util/path" import { fetchCanonical } from "./util" +import { randomIdNonSecure } from "../../util/random" const p = new DOMParser() + async function mouseEnterHandler( this: HTMLAnchorElement, { clientX, clientY }: { clientX: number; clientY: number }, @@ -10,7 +12,7 @@ async function mouseEnterHandler( clearActivePopover() const link = this - link.id = link.innerText + link.id = `backlink-${randomIdNonSecure()}` if (link.dataset.noPopover === "true") { return } @@ -21,12 +23,11 @@ async function mouseEnterHandler( middleware: [inline({ x: clientX, y: clientY }), shift(), flip()], }) Object.assign(popoverElement.style, { - left: `${x}px`, - transform: `translateY(${y}px)`, + transform: `translate(${x}px, ${y}px)`, }) } - const prevPopoverElement = document.getElementById(`popover-${link.id}`) + const prevPopoverElement = document.getElementById(`popover-${link.id.split("-")[1]}`) const hasAlreadyBeenFetched = () => !!prevPopoverElement // dont refetch if there's already a popover @@ -97,7 +98,7 @@ async function mouseEnterHandler( } setPosition(popoverElement) - popoverElement.id = `popover-${link.id}` + popoverElement.id = `popover-${link.id.split("-")[1]}` popoverElement?.classList.add("active-popover") document.body.appendChild(popoverElement) diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss index e070d59e5..70e1dd6d2 100644 --- a/quartz/components/styles/popover.scss +++ b/quartz/components/styles/popover.scss @@ -19,6 +19,7 @@ position: fixed; overflow: visible; padding: 1rem; + left: 0; top: 0; will-change: transform;