fix: Tooltip Overlapping Charts due to a low z-index

src/components/chart-elements/AreaChart/AreaChart.tsx

@@ -241,7 +241,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               )}
             </YAxis>
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 100 }}
               isAnimationActive={false}
               cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
               content={

src/components/chart-elements/BarChart/BarChart.tsx

@@ -328,7 +328,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
               </YAxis>
             )}
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 100 }}
               isAnimationActive={false}
               cursor={{ fill: "#d1d5db", opacity: "0.15" }}
               content={

src/components/chart-elements/DonutChart/DonutChart.tsx

@@ -192,7 +192,7 @@ const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>((props, ref
               />
             ) : null} */}
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 100 }}
               isAnimationActive={false}
               content={
                 showTooltip ? (

src/components/chart-elements/FunnelChart/FunnelChart.tsx

@@ -670,6 +670,7 @@ const FunnelChartPrimitive = React.forwardRef<HTMLDivElement, FunnelChartProps>(
                 className={tremorTwMerge(
                   "absolute top-0 pointer-events-none",
                   tooltip.data ? "visible" : "hidden",
+                  "z-50",
                 )}
                 tabIndex={-1}
                 role="dialog"

src/components/chart-elements/LineChart/LineChart.tsx

@@ -237,7 +237,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
               )}
             </YAxis>
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 100 }}
               isAnimationActive={false}
               cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
               content={

src/components/chart-elements/ScatterChart/ScatterChart.tsx

@@ -307,7 +307,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
               </YAxis>
             ) : null}
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 100 }}
               isAnimationActive={false}
               cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
               content={

src/stories/chart-elements/BarChart.stories.tsx

@@ -11,6 +11,7 @@ import {
   longBaseChartData,
   longIndexBaseChartData,
   simpleBaseChartWithNegativeValues,
+  longDataName,
 } from "./helpers/testData";
 
 const meta: Meta<typeof BarChart> = {
@@ -387,3 +388,38 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export function LongTooltip() {
+  return (
+    <>
+      <div className="grid grid-cols-2">
+        <div className="flex flex-wrap">
+          <BarChart
+            className="mt-6"
+            data={longDataName}
+            index="name"
+            categories={[
+              'Group A',
+              'Group B',
+              'Group C',
+            ]}
+            colors={['blue', 'teal', 'amber']}
+          />
+        </div>
+        <div className="flex flex-wrap">
+          <BarChart
+            className="mt-6"
+            data={longDataName}
+            index="name"
+            categories={[
+              'Group A',
+              'Group B',
+              'Group C',
+            ]}
+            colors={['blue', 'teal', 'amber']}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

src/stories/chart-elements/helpers/testData.tsx

@@ -1751,3 +1751,12 @@ export const singleAndMultipleData = [
     Sales: 3612,
   },
 ];
+
+export const longDataName = [
+  {
+    name: 'Very very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong Topic 1',
+    'Group A': 890,
+    'Group B': 338,
+    'Group C': 538,
+  },
+];