[sparkle] Add tooltip on header (#8667)

dust-tt · Nov 15, 2024 · 0cc7a94 · 0cc7a94
1 parent c8e72ae
commit 0cc7a94
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git 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,13 +13,15 @@ import { Button } from "./Button";
 
 interface BarHeaderProps {
   title: string;
+  tooltip?: string;
   leftActions?: React.ReactNode;
   rightActions?: React.ReactNode;
   className?: string;
 }
 
 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
@@ -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">