fix(tooltip): Bugfix/2490 tooltip theme (#2552)

* Issue #2490 extend tooltip theme to allow customization of TooltipWrapper component * Issue #2490 extend tooltip theme to allow customization of TooltipWrapper component
plouc · Apr 23, 2024 · 6a9defe · 6a9defe
1 parent 831d28d
commit 6a9defe
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -113,6 +113,7 @@ export type CompleteTheme = {
         text: TextStyle
     }
     tooltip: {
+        wrapper: Partial<React.CSSProperties>
         container: Partial<React.CSSProperties>
         basic: Partial<React.CSSProperties>
         chip: Partial<React.CSSProperties>

diff --git a/packages/tooltip/src/TooltipWrapper.tsx b/packages/tooltip/src/TooltipWrapper.tsx
@@ -10,9 +10,9 @@ import { TooltipStateContextDataVisible } from './context'
 
 const TOOLTIP_OFFSET = 14
 
-const tooltipStyle = {
-    pointerEvents: 'none' as CSSProperties['pointerEvents'],
-    position: 'absolute' as CSSProperties['position'],
+const tooltipStyle: Partial<CSSProperties> = {
+    pointerEvents: 'none',
+    position: 'absolute',
     zIndex: 10,
     top: 0,
     left: 0,
@@ -78,7 +78,7 @@ export const TooltipWrapper = memo<PropsWithChildren<TooltipWrapperProps>>(
 
         const style = {
             ...tooltipStyle,
-            ...theme.tooltip,
+            ...theme.tooltip.wrapper,
             transform: animatedProps.transform ?? translate(x, y),
             opacity: animatedProps.transform ? 1 : 0,
         }

diff --git a/website/src/components/guides/theming/defaults.ts b/website/src/components/guides/theming/defaults.ts
@@ -108,6 +108,7 @@ const annotationsDefaults: CompleteTheme['annotations'] = {
 }
 
 const tooltipDefaults: CompleteTheme['tooltip'] = {
+    wrapper: {},
     container: {
         background: '#ffffff',
         color: extendedTheme.text.fill,