Fix graphs tooltip position

ts/graphs/buttons.ts

@@ -257,7 +257,7 @@ export function renderButtons(
         .attr("width", xButton.bandwidth())
         .attr("height", () => y(0)! - y(yMax!)!)
         .on("mousemove", (event: MouseEvent, d: Datum) => {
-            const [x, y] = pointer(event);
+            const [x, y] = pointer(event, document.body);
             showTooltip(tooltipText(d), x, y);
         })
         .on("mouseout", hideTooltip);

ts/graphs/calendar.ts

@@ -208,7 +208,7 @@ export function renderCalendar(
         .attr("x", (d) => x(d.weekNumber + 1)!)
         .attr("y", (d) => bounds.marginTop + d.weekDay * height)
         .on("mousemove", (event: MouseEvent, d: DayDatum) => {
-            const [x, y] = pointer(event);
+            const [x, y] = pointer(event, document.body);
             showTooltip(tooltipText(d), x, y);
         })
         .on("mouseout", hideTooltip)

ts/graphs/histogram-graph.ts

@@ -170,7 +170,7 @@ export function histogramGraph(
         .attr("width", ([bin]) => barWidth(bin))
         .attr("height", () => y(0) - y(yMax))
         .on("mousemove", (event: MouseEvent, [bin, area]) => {
-            const [x, y] = pointer(event);
+            const [x, y] = pointer(event, document.body);
             const pct = data.showArea ? (area / data.total) * 100 : 0;
             showTooltip(data.hoverText(bin, area, pct), x, y);
         })

ts/graphs/hours.ts

@@ -205,7 +205,7 @@ export function renderHours(
         .attr("width", x.bandwidth())
         .attr("height", () => y(0)! - y(yMax!)!)
         .on("mousemove", (event: MouseEvent, d: Hour) => {
-            const [x, y] = pointer(event);
+            const [x, y] = pointer(event, document.body);
             showTooltip(tooltipText(d), x, y);
         })
         .on("mouseout", hideTooltip);

ts/graphs/reviews.ts

@@ -376,7 +376,7 @@ export function renderReviews(
         .attr("width", ([bin]) => barWidth(bin))
         .attr("height", () => y(0) - y(yMax))
         .on("mousemove", (event: MouseEvent, [bin, area]): void => {
-            const [x, y] = pointer(event);
+            const [x, y] = pointer(event, document.body);
             showTooltip(tooltipText(bin as any, area), x, y);
         })
         .on("mouseout", hideTooltip);

ts/graphs/tooltip.ts

@@ -3,14 +3,11 @@
 
 import throttle from "lodash.throttle";
 
-let tooltipDiv: HTMLDivElement | null = null;
+const tooltipDiv: HTMLDivElement = document.createElement("div");
+tooltipDiv.className = "graph-tooltip";
+document.body.appendChild(tooltipDiv);
 
 function showTooltipInner(msg: string, x: number, y: number): void {
-    if (!tooltipDiv) {
-        tooltipDiv = document.createElement("div");
-        tooltipDiv.className = "graph-tooltip";
-        document.body.appendChild(tooltipDiv);
-    }
     tooltipDiv.innerHTML = msg;
 
     // move tooltip away from edge as user approaches right side
@@ -18,8 +15,11 @@ function showTooltipInner(msg: string, x: number, y: number): void {
         tooltipDiv.clientWidth * 1.2 * (x / document.body.clientWidth)
     );
 
-    tooltipDiv.style.left = `${x + 40 - shiftLeftAmount}px`;
+    const adjustedX = x + 40 - shiftLeftAmount;
-    tooltipDiv.style.top = `${y + 40}px`;
+    const adjustedY = y + 40;
+
+    tooltipDiv.style.left = `${adjustedX}px`;
+    tooltipDiv.style.top = `${adjustedY}px`;
     tooltipDiv.style.opacity = "1";
 }
 
@@ -27,7 +27,5 @@ export const showTooltip = throttle(showTooltipInner, 16);
 
 export function hideTooltip(): void {
     showTooltip.cancel();
-    if (tooltipDiv) {
+    tooltipDiv.style.opacity = "0";
-        tooltipDiv.style.opacity = "0";
-    }
 }