feat: Tooltip for Buttons

Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: root <root@DESKTOP-IBCJMH9>

src/components/input-elements/Button/Button.tsx

@@ -2,6 +2,7 @@
 import React from "react";
 import { twMerge } from "tailwind-merge";
 import { Transition } from "react-transition-group";
+import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip";
 
 import {
   BaseColors,
@@ -12,6 +13,7 @@ import {
   boxShadow,
   fontWeight,
   makeClassName,
+  mergeRefs,
   sizing,
   spacing,
 } from "lib";
@@ -77,6 +79,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   disabled?: boolean;
   loading?: boolean;
   loadingText?: string;
+  tooltip?: string;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
@@ -91,6 +94,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     loadingText,
     children,
     className,
+    tooltip,
     ...other
   } = props;
 
@@ -105,12 +109,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     variant !== "light" ? twMerge(borderRadius.md.all, border.sm.all, boxShadow.sm) : "";
   const buttonColorStyles = getButtonColors(variant, color);
   const buttonProportionStyles = getButtonProportions(variant)[size];
+  const { tooltipProps, getReferenceProps } = useTooltip();
 
   return (
     <Transition in={loading} timeout={50}>
       {(state) => (
         <button
-          ref={ref}
+          ref={mergeRefs([ref, tooltipProps.refs.setReference])}
           className={twMerge(
             makeButtonClassName("root"),
             "flex-shrink-0 inline-flex justify-center items-center group",
@@ -134,8 +139,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
             className,
           )}
           disabled={isDisabled}
+          {...getReferenceProps}
           {...other}
         >
+          <Tooltip text={tooltip} {...tooltipProps} />
           {showButtonIconOrSpinner && iconPosition !== HorizontalPositions.Right ? (
             <ButtonIconOrSpinner
               loading={loading}

src/stories/input-elements/Button.stories.tsx

@@ -23,7 +23,7 @@ const SizesTemplate: ComponentStory<typeof Button> = (args) => (
     <Grid numCols={5} className="gap-y-2">
       {Object.values(InputSizes).map((size) => (
         <>
-          <Button {...args} size={size}>
+          <Button {...args} size={size} tooltip="Tooltip">
             Button
           </Button>
           <Button {...args} size={size} icon={MyIcon}>