Adjust tooltip position

Author: apata

assets/js/dashboard/components/graph-tooltip.tsx

@@ -21,11 +21,12 @@ export const GraphTooltipWrapper = ({
   isTouchDevice?: boolean
 }) => {
   const ref = useRef<HTMLDivElement>(null)
-  // distance from cursor to tooltip edge
-  const offsetFromCursor = 32
+  // bigger on mobile to have room between thumb and tooltip
+  const xOffsetFromCursor = isTouchDevice ? 24 : 12
+  const yOffsetFromCursor = isTouchDevice ? 48 : 24
   const [measuredWidth, setMeasuredWidth] = useState(minWidth)
   // center tooltip above the cursor, clamped to prevent left/right overflow
-  const rawLeft = x - measuredWidth / 2
+  const rawLeft = x + xOffsetFromCursor
   const tooltipLeft = Math.max(0, Math.min(rawLeft, maxX - measuredWidth))
 
   useLayoutEffect(() => {
@@ -54,7 +55,7 @@ export const GraphTooltipWrapper = ({
           minWidth,
           left: tooltipLeft,
           top: y,
-          transform: `translateY(-100%) translateY(-${offsetFromCursor}px)`
+          transform: `translateY(-100%) translateY(-${yOffsetFromCursor}px)`
         }}
       >
         {children}

assets/js/dashboard/components/graph.tsx

@@ -266,7 +266,8 @@ function InnerGraph<T extends ReadonlyArray<number | null>>({
         xPointer >= xLeftEdge - hoverBuffer &&
         xPointer <= xRightEdge + hoverBuffer &&
         yPointer >= yTopEdge - hoverBuffer &&
-        yPointer <= yBottomEdge + hoverBuffer
+        // chart is interactive even over x-axis labels
+        yPointer <= height
       return { xPointer, yPointer, inHoverableArea }
     }
     const getClosestIndexToPointer = (xPointer: number): number =>

assets/js/dashboard/stats/graph/main-graph.tsx

@@ -321,7 +321,7 @@ const MainGraphTooltip = ({
       maxX={maxX}
       isTouchDevice={isTouchDevice}
       className={
-        'absolute select-none pointer-events-none bg-gray-800 dark:bg-gray-950 py-3 px-4 rounded-md z-[100] shadow shadow-gray-200 dark:shadow-gray-850'
+        'absolute z-10 select-none pointer-events-none bg-gray-800 dark:bg-gray-950 py-3 px-4 rounded-md shadow shadow-gray-200 dark:shadow-gray-850'
       }
     >
       <aside className="text-sm font-normal text-gray-100 flex flex-col gap-1.5">
@@ -407,7 +407,7 @@ export const MainGraphContainer = React.forwardRef<
   { children: ReactNode }
 >((props, ref) => {
   return (
-    <div className="relative my-4 h-92 w-full z-0" ref={ref}>
+    <div className="relative my-4 h-92 w-full" ref={ref}>
       {props.children}
     </div>
   )