Merge pull request #930 from mrmerlin320/customTooltip

fix: update custom tooltip styles
layer5io · Feb 22, 2025 · 968af22 · 968af22
2 parents 7f1a47b + 5936d9b
commit 968af22
Showing 1 changed file with 29 additions and 22 deletions.
diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React from 'react';
 import { Tooltip, TooltipProps } from '../../base';
 import { WHITE } from '../../theme';
@@ -11,6 +12,7 @@ type CustomTooltipProps = {
   fontWeight?: number;
   variant?: 'standard' | 'small';
   bgColor?: string;
+  componentsProps?: TooltipProps['componentsProps'];
 } & Omit<TooltipProps, 'title' | 'onClick'>;
 
 function CustomTooltip({
@@ -22,34 +24,39 @@ function CustomTooltip({
   fontWeight = 400,
   variant = 'standard',
   bgColor = '#141414',
+  componentsProps = {},
   ...props
 }: CustomTooltipProps): JSX.Element {
   return (
     <Tooltip
-      componentsProps={{
-        tooltip: {
-          sx: {
-            background: bgColor,
-            color: WHITE,
-            fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'),
-            fontWeight: { fontWeight },
-            borderRadius: '0.5rem',
-            padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem',
-            boxShadow: 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'
+      componentsProps={_.merge(
+        {
+          tooltip: {
+            sx: {
+              background: bgColor,
+              color: WHITE,
+              maxWidth: '600px',
+              fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'),
+              fontWeight: { fontWeight },
+              borderRadius: '0.5rem',
+              padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem',
+              boxShadow: 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'
+            }
+          },
+          popper: {
+            sx: {
+              zIndex: 9999999999,
+              opacity: '1'
+            }
+          },
+          arrow: {
+            sx: {
+              color: bgColor
+            }
           }
         },
-        popper: {
-          sx: {
-            zIndex: 9999999999,
-            opacity: '1'
-          }
-        },
-        arrow: {
-          sx: {
-            color: bgColor
-          }
-        }
-      }}
+        componentsProps
+      )}
       title={typeof title === 'string' ? <RenderMarkdownTooltip content={title} /> : title}
       placement={placement}
       arrow