fix: Drill to detail blocked by tooltip (#22082)

Co-authored-by: Ville Brofeldt <ville.brofeldt@apple.com>

superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts

@@ -1,4 +1,6 @@
+import { CallbackDataParams } from 'echarts/types/src/util/types';
 import { LegendOrientation } from './types';
+import { TOOLTIP_POINTER_MARGIN, TOOLTIP_OVERFLOW_MARGIN } from './constants';
 
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
@@ -23,7 +25,59 @@ export const defaultGrid = {
 };
 
 export const defaultTooltip = {
-  confine: true,
+  position: (
+    canvasMousePos: [number, number],
+    params: CallbackDataParams,
+    tooltipDom: HTMLElement,
+    rect: any,
+    sizes: { contentSize: [number, number]; viewSize: [number, number] },
+  ) => {
+    // algorithm copy-pasted from here:
+    // https://github.com/apache/echarts/issues/5004#issuecomment-559668309
+
+    // The chart canvas position
+    const canvasRect = tooltipDom.parentElement
+      ?.getElementsByTagName('canvas')[0]
+      .getBoundingClientRect();
+
+    // The mouse coordinates relative to the whole window
+    // The first parameter to the position function is the mouse position relative to the canvas
+    const mouseX = canvasMousePos[0] + (canvasRect?.x || 0);
+    const mouseY = canvasMousePos[1] + (canvasRect?.y || 0);
+
+    // The width and height of the tooltip dom element
+    const tooltipWidth = sizes.contentSize[0];
+    const tooltipHeight = sizes.contentSize[1];
+
+    // Start by placing the tooltip top and right relative to the mouse position
+    let xPos = mouseX + TOOLTIP_POINTER_MARGIN;
+    let yPos = mouseY - TOOLTIP_POINTER_MARGIN - tooltipHeight;
+
+    // The tooltip is overflowing past the right edge of the window
+    if (xPos + tooltipWidth >= document.documentElement.clientWidth) {
+      // Attempt to place the tooltip to the left of the mouse position
+      xPos = mouseX - TOOLTIP_POINTER_MARGIN - tooltipWidth;
+
+      // The tooltip is overflowing past the left edge of the window
+      if (xPos <= 0)
+        // Place the tooltip a fixed distance from the left edge of the window
+        xPos = TOOLTIP_OVERFLOW_MARGIN;
+    }
+
+    // The tooltip is overflowing past the top edge of the window
+    if (yPos <= 0) {
+      // Attempt to place the tooltip to the bottom of the mouse position
+      yPos = mouseY + TOOLTIP_POINTER_MARGIN;
+
+      // The tooltip is overflowing past the bottom edge of the window
+      if (yPos + tooltipHeight >= document.documentElement.clientHeight)
+        // Place the tooltip a fixed distance from the top edge of the window
+        yPos = TOOLTIP_OVERFLOW_MARGIN;
+    }
+
+    // Return the position (converted back to a relative position on the canvas)
+    return [xPos - (canvasRect?.x || 0), yPos - (canvasRect?.y || 0)];
+  },
 };
 
 export const defaultYAxis = {