diff --git a/sparkle/src/components/BarHeader.tsx b/sparkle/src/components/BarHeader.tsx
index 67e5f668b348..fca82183a8aa 100644
--- a/sparkle/src/components/BarHeader.tsx
+++ b/sparkle/src/components/BarHeader.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+import { Tooltip } from "@sparkle/components/Tooltip";
 import {
   ArrowUpOnSquareIcon,
   ChevronLeftIcon,
@@ -12,6 +13,7 @@ import { Button } from "./Button";
 
 interface BarHeaderProps {
   title: string;
+  tooltip?: string;
   leftActions?: React.ReactNode;
   rightActions?: React.ReactNode;
   className?: string;
@@ -19,6 +21,7 @@ interface BarHeaderProps {
 
 export function BarHeader({
   title,
+  tooltip,
   leftActions,
   rightActions,
   className = "",
@@ -39,7 +42,17 @@ export function BarHeader({
       )}
     >
       {leftActions && <div className={buttonBarClasses}>{leftActions}</div>}
-      <div className={titleClasses}>{title}</div>
+      <div className={titleClasses}>
+        {tooltip ? (
+          <Tooltip
+            tooltipTriggerAsChild
+            trigger={<span>{title}</span>}
+            label={tooltip}
+          ></Tooltip>
+        ) : (
+          title
+        )}
+      </div>
       {rightActions && <div className={buttonBarClasses}>{rightActions}</div>}
     </div>
   );
diff --git a/sparkle/src/stories/BarHeader.stories.tsx b/sparkle/src/stories/BarHeader.stories.tsx
index c585fec47eb2..c0e3703fec19 100644
--- a/sparkle/src/stories/BarHeader.stories.tsx
+++ b/sparkle/src/stories/BarHeader.stories.tsx
@@ -146,6 +146,7 @@ export const BasicBarHeaderConversation = () => (
   <div className="s-mt-16 s-h-full s-w-full">
     <BarHeader
       title="Knowledge Base"
+      tooltip="This is a tooltip"
       rightActions={<BarHeader.ButtonBar variant="conversation" />}
     />
     <div className="s-flex s-flex-col s-gap-16 s-overflow-auto">