feat: tooltip组件修改

src/components/mui/MyTooltip.tsx

@@ -8,6 +8,7 @@
  */
 import { Tooltip, TooltipProps } from "@mui/material";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { useMemo } from "react";
 
 interface IMyTooltipProps extends Omit<TooltipProps, "title"> {
 	title?: string | boolean;
@@ -19,8 +20,8 @@ const theme = createTheme({
 			styleOverrides: {
 				tooltip: {
 					backgroundColor: "rgba(7, 19, 38, .8)",
-					padding:'8px 16px',
 					color: "#fff",
+					padding: 0,
 				},
 				arrow: {
 					"&:before": {
@@ -35,12 +36,31 @@ const theme = createTheme({
 
 const MyTooltip = (props: IMyTooltipProps) => {
 	const { title = false, children, placement = "top", ...other } = props;
+
+	const randerTitle = useMemo(() => {
+		if (title) {
+			return (
+				<div
+					style={{
+						maxHeight: "36vh",
+						overflow: "overlay",
+						padding: "8px 16px",
+					}}
+				>
+					{title}
+				</div>
+			);
+		} else {
+			return "";
+		}
+	}, [title]);
+
 	return (
 		<ThemeProvider theme={theme}>
 			<Tooltip
 				// interactive={true}
 				arrow
-				title={title || ''}
+				title={randerTitle}
 				placement={placement}
 				{...other}
 			>