Merge pull request #368 from nginformatica/fix/tooltip-props

Fix/tooltip props

Author: KarineBrandelli

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.35.5",
+    "version": "0.35.6",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -35,7 +35,7 @@
         "@mui/icons-material": "6.4.2",
         "@mui/material": "6.4.2",
         "@mui/system": "6.4.2",
-        "@mui/x-date-pickers": "7.24.1",
+        "@mui/x-date-pickers": "7.25.0",
         "ramda": "0.30.1",
         "react-loading-skeleton": "3.5.0",
         "react-number-format": "5.4.3"
@@ -48,18 +48,18 @@
         "@babel/preset-react": "7.26.3",
         "@babel/preset-typescript": "7.26.0",
         "@faker-js/faker": "9.4.0",
-        "@storybook/addon-essentials": "8.5.2",
+        "@storybook/addon-essentials": "8.5.3",
         "@storybook/addon-webpack5-compiler-babel": "3.0.5",
-        "@storybook/blocks": "8.5.2",
-        "@storybook/react": "8.5.2",
-        "@storybook/react-webpack5": "8.5.2",
+        "@storybook/blocks": "8.5.3",
+        "@storybook/react": "8.5.3",
+        "@storybook/react-webpack5": "8.5.3",
         "@stylistic/eslint-plugin": "3.0.1",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.6.3",
         "@testing-library/react": "16.2.0",
         "@testing-library/user-event": "14.6.1",
         "@types/jest": "29.5.14",
-        "@types/node": "22.12.0",
+        "@types/node": "22.13.0",
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
         "@types/uuid": "10.0.0",
@@ -83,7 +83,7 @@
         "prettier": "3.4.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "storybook": "8.5.2",
+        "storybook": "8.5.3",
         "styled-components": "6.1.14",
         "ts-jest": "29.2.5",
         "ts-loader": "9.5.2",

src/core/feedback/tooltip/index.tsx

@@ -2,8 +2,9 @@ import React from 'react'
 import type { ReactElement, CSSProperties, ReactNode } from 'react'
 import MuiTooltip from '@mui/material/Tooltip'
 import type { DefaultProps } from '../../types'
+import type { TooltipProps as MuiTooltipProps } from '@mui/material/Tooltip'
 
-export interface TooltipProps extends DefaultProps {
+export interface TooltipProps extends DefaultProps, MuiTooltipProps {
     placement?:
         | 'bottom-end'
         | 'bottom-start'
@@ -25,17 +26,29 @@ export interface TooltipProps extends DefaultProps {
     open?: boolean
     children: ReactElement<Record<string, unknown>>
     enterDelay?: number
+    zIndex?: number
 }
 
 const Tooltip = ({
+    title,
+    zIndex,
     children,
     withWrapper,
     wrapperStyle,
     enterDelay = 1000,
-    title,
     ...otherProps
 }: TooltipProps) => (
-    <MuiTooltip title={title || ''} enterDelay={enterDelay} {...otherProps}>
+    <MuiTooltip
+        title={title || ''}
+        enterDelay={enterDelay}
+        slotProps={{
+            popper: {
+                sx: {
+                    zIndex: zIndex || 9999
+                }
+            }
+        }}
+        {...otherProps}>
         {withWrapper ? (
             <div
                 style={{