Improve line graph tooltip (#3601)

scripts/js/charts.js

@@ -260,6 +260,10 @@ function positionTooltip(tooltipEl, tooltip, context) {
   const arrowMinIndent = 2 * tooltip.options.cornerRadius;
   const arrowSize = 5;
 
+  // Check if this is a queryOverTimeChart or clientsChart - these should stick to x-axis
+  const canvasId = context.chart.canvas.id;
+  const isTimelineChart = canvasId === "queryOverTimeChart" || canvasId === "clientsChart";
+
   let tooltipX = offsetX + caretX;
   let arrowX;
 
@@ -316,27 +320,37 @@ function positionTooltip(tooltipEl, tooltip, context) {
     arrowX = offsetX + caretX - tooltipX;
   }
 
-  let tooltipY = offsetY + caretY;
+  let tooltipY;
 
-  // Compute Y position
-  switch (tooltip.yAlign) {
-    case "top": {
-      tooltipY += arrowSize + caretPadding;
-      break;
-    }
+  if (isTimelineChart) {
+    // For timeline charts, always position tooltip below the chart with caret pointing to x-axis
+    const chartArea = context.chart.chartArea;
+    const canvasBottom = chartArea.bottom;
+    tooltipY = offsetY + canvasBottom + arrowSize + caretPadding;
 
-    case "center": {
-      tooltipY -= tooltipHeight / 2;
-      if (tooltip.xAlign === "left") tooltipX += arrowSize;
-      if (tooltip.xAlign === "right") tooltipX -= arrowSize;
-      break;
-    }
+    // Ensure the arrow points to the correct X position
+    arrowX = tooltip.caretX - (tooltipX - offsetX);
+  } else {
+    tooltipY = offsetY + caretY;
+    switch (tooltip.yAlign) {
+      case "top": {
+        tooltipY += arrowSize + caretPadding;
+        break;
+      }
 
-    case "bottom": {
-      tooltipY -= tooltipHeight + arrowSize + caretPadding;
-      break;
+      case "center": {
+        tooltipY -= tooltipHeight / 2;
+        if (tooltip.xAlign === "left") tooltipX += arrowSize;
+        if (tooltip.xAlign === "right") tooltipX -= arrowSize;
+        break;
+      }
+
+      case "bottom": {
+        tooltipY -= tooltipHeight + arrowSize + caretPadding;
+        break;
+      }
+      // No default
     }
-    // No default
   }
 
   // Position tooltip and display

scripts/js/index.js

@@ -518,8 +518,8 @@ function labelWithPercentage(tooltipLabel, skipZero = false) {
   // Sum all queries for the current time by iterating over all keys in the
   // current dataset
   let sum = 0;
-  for (const value of Object.values(tooltipLabel.parsed._stacks.y)) {
-    if (value === undefined) continue;
+  for (const [key, value] of Object.entries(tooltipLabel.parsed._stacks.y)) {
+    if (key.startsWith("_") || value === undefined) continue;
     const num = Number.parseInt(value, 10);
     if (num) sum += num;
   }
@@ -636,9 +636,11 @@ $(() => {
           display: false,
         },
         tooltip: {
-          enabled: true,
+          // Disable the on-canvas tooltip
+          enabled: false,
           intersect: false,
-          yAlign: "bottom",
+          external: customTooltips,
+          yAlign: "top",
           itemSort(a, b) {
             return b.datasetIndex - a.datasetIndex;
           },
@@ -653,7 +655,7 @@ $(() => {
               return "Queries from " + from + " to " + to;
             },
             label(tooltipLabel) {
-              return labelWithPercentage(tooltipLabel);
+              return labelWithPercentage(tooltipLabel, true);
             },
           },
         },