diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
index 57426b026..8dce26ed6 100644
--- a/src/components/chart-elements/AreaChart/AreaChart.tsx
+++ b/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={
diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx
index c87df34bd..b548bd741 100644
--- a/src/components/chart-elements/BarChart/BarChart.tsx
+++ b/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={
diff --git a/src/components/chart-elements/DonutChart/DonutChart.tsx b/src/components/chart-elements/DonutChart/DonutChart.tsx
index a3e0de11b..c38ee265d 100644
--- a/src/components/chart-elements/DonutChart/DonutChart.tsx
+++ b/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 ? (
diff --git a/src/components/chart-elements/FunnelChart/FunnelChart.tsx b/src/components/chart-elements/FunnelChart/FunnelChart.tsx
index 6c2696ac0..4635e5670 100644
--- a/src/components/chart-elements/FunnelChart/FunnelChart.tsx
+++ b/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"
diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx
index ded14f8df..5b167661f 100644
--- a/src/components/chart-elements/LineChart/LineChart.tsx
+++ b/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={
diff --git a/src/components/chart-elements/ScatterChart/ScatterChart.tsx b/src/components/chart-elements/ScatterChart/ScatterChart.tsx
index 99b17afe3..ada5fa6e7 100644
--- a/src/components/chart-elements/ScatterChart/ScatterChart.tsx
+++ b/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={
diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index 664925dcf..97f9cb6ce 100644
--- a/src/stories/chart-elements/BarChart.stories.tsx
+++ b/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>
+    </>
+  );
+}
diff --git a/src/stories/chart-elements/helpers/testData.tsx b/src/stories/chart-elements/helpers/testData.tsx
index 879569ad2..042bc6dae 100644
--- a/src/stories/chart-elements/helpers/testData.tsx
+++ b/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,
+  },
+];