components/Boxplot.module.css

@@ -8,14 +8,19 @@
 }
 
 .tooltip {
+  font-family: "Inconsolata", monospace;
+  top: 0;
+  left: 0;
+  position: absolute;
   background-color: var(--label);
   color: var(--primary-background);
+  pointer-events: none;
   padding: calc(10rem / 16);
   border-radius: calc(10rem / 16);
 }
 
 .tooltip .category {
-  margin: 10px 0 0 0;
+  margin: calc(10rem / 16) 0 0 0;
   font-weight: 700;
 }
 

components/Boxplot.tsx

@@ -6,11 +6,7 @@ import { Point } from "@visx/point";
 import { scaleBand, scaleLinear } from "@visx/scale";
 import { Line } from "@visx/shape";
 import { BoxPlot as VisxBoxPlot } from "@visx/stats";
-import {
-  withTooltip,
-  Tooltip,
-  defaultStyles as defaultTooltipStyles,
-} from "@visx/tooltip";
+import { withTooltip, Tooltip } from "@visx/tooltip";
 import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withTooltip";
 import React from "react";
 import { Color } from "utils/Color";
@@ -347,11 +343,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
             top={tooltipTop}
             left={tooltipLeft}
             className={styles.tooltip}
-            style={{
-              ...defaultTooltipStyles,
-              borderRadius: "10px",
-              padding: 10,
-            }}
+            unstyled
           >
             <p className={styles.category}>{tooltipData.category}</p>
             <div className={styles.toolTipData}>