Add tooltip on header

Author: tdraier

sparkle/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.311",
+  "version": "0.2.312",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

sparkle/package.json

@@ -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>
   );

sparkle/src/components/BarHeader.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">