fix tooltip overflow (#23475)

* fix tooltip overflow

* explicit default for preventOverflow

* check ci

frontend/src/metabase/components/Tooltip/Tooltip.tsx

-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import * as Tippy from "@tippyjs/react";
 import * as ReactIs from "react-is";
@@ -26,6 +26,7 @@ export interface TooltipProps
       "delay" | "reference" | "placement" | "maxWidth" | "offset"
     >
   > {
+  preventOverflow?: boolean;
   tooltip?: React.ReactNode;
   children?: React.ReactNode;
   isEnabled?: boolean;
@@ -69,6 +70,7 @@ function Tooltip({
   offset,
   isEnabled,
   isOpen,
+  preventOverflow = false,
   maxWidth = 200,
 }: TooltipProps) {
   const visible = isOpen != null ? isOpen : undefined;
@@ -76,6 +78,23 @@ function Tooltip({
   const disabled = isEnabled === false;
   const targetProps = getTargetProps(reference, children);
 
+  const popperOptions = useMemo(
+    () =>
+      preventOverflow
+        ? {
+            modifiers: [
+              {
+                name: "preventOverflow",
+                options: {
+                  altAxis: true,
+                },
+              },
+            ],
+          }
+        : undefined,
+    [preventOverflow],
+  );
+
   if (tooltip && targetProps) {
     return (
       <TippyComponent
@@ -92,6 +111,7 @@ function Tooltip({
         placement={placement}
         offset={offset}
         zIndex={DEFAULT_Z_INDEX}
+        popperOptions={popperOptions}
         {...targetProps}
       />
     );

frontend/src/metabase/visualizations/components/ChartTooltip/ChartTooltip.tsx

@@ -51,6 +51,7 @@ const ChartTooltip = ({ hovered, settings }: ChartTooltipProps) => {
 
   return target ? (
     <Tooltip
+      preventOverflow
       reference={target}
       isOpen={isOpen}
       tooltip={tooltip}