[@mantine/core] Tooltip: Fix z-index during transitions

mantinedev · Jul 30, 2021 · 6a3f337 · 6a3f337
1 parent b75b264
commit 6a3f337
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/mantine-core/src/components/Tooltip/Tooltip.tsx b/src/mantine-core/src/components/Tooltip/Tooltip.tsx
@@ -141,7 +141,10 @@ export function Tooltip({
         timingFunction={transitionTimingFunction}
       >
         {(transitionStyles) => (
-          <div className={classes.wrapper} style={{ ..._styles.wrapper, ...transitionStyles }}>
+          <div
+            className={classes.wrapper}
+            style={{ ..._styles.wrapper, ...transitionStyles, zIndex }}
+          >
             <ArrowBody
               id={tooltipId}
               gutter={gutter}

diff --git a/src/mantine-core/src/components/Tooltip/demos/positions.tsx b/src/mantine-core/src/components/Tooltip/demos/positions.tsx
@@ -3,7 +3,7 @@ import { Tooltip, Badge, Group } from '../../../index';
 
 function Demo() {
   const tooltips = (['top', 'right', 'bottom', 'left'] as const).map((position, index) => {
-    const placements = (['start', 'center', 'end'] as const).map((placement, placementIndex) => (
+    const placements = (['start', 'center', 'end'] as const).map((placement) => (
       <Tooltip
         data-mantine-composable
         key={placement}
@@ -12,7 +12,6 @@ function Demo() {
         label={`${position}-${placement}`}
         withArrow
         gutter={10}
-        style={{ zIndex: 6 - index - (position === 'right' ? placementIndex : -placementIndex) }}
       >
         <Badge color="blue" size="lg">
           {`${position}-${placement}`}