udpate toolbar button to include tooltip

Author: javiert-okta

src/features/common/components/card-toolbar-button/card-toolbar-button.component.tsx

@@ -7,12 +7,13 @@ import { MonoFont } from "@/libs/theme/fonts";
 export interface CardToolbarButtonComponentProps
   extends AriaButtonOptions<"span"> {
   variant: "standard" | "icon";
+  tooltipText?: string;
 }
 
 export const CardToolbarButtonComponent: React.FC<
   PropsWithChildren<CardToolbarButtonComponentProps>
 > = (props) => {
-  const { variant, children } = props;
+  const { variant, tooltipText, children } = props;
 
   const ref = useRef<HTMLButtonElement | null>(null);
 
@@ -22,20 +23,25 @@ export const CardToolbarButtonComponent: React.FC<
       elementType: "span",
       preventFocusOnPress: true,
     },
-    ref,
+    ref
   );
 
   return (
-    <button
-      {...buttonProps}
-      type="button"
-      className={clsx(
-        variant === "icon" ? styles.button__icon : styles.button__standard,
-        MonoFont.className,
+    <div className={styles.button__tooltipContainer}>
+      <button
+        {...buttonProps}
+        type="button"
+        className={clsx(
+          variant === "icon" ? styles.button__icon : styles.button__standard,
+          MonoFont.className
+        )}
+        data-style="compact"
+      >
+        {children}
+      </button>
+      {tooltipText && (
+        <span className={styles.button__tooltip}>{tooltipText}</span>
       )}
-      data-style="compact"
-    >
-      {children}
-    </button>
+    </div>
   );
 };

src/features/common/components/card-toolbar-button/card-toolbar-button.module.scss

@@ -1,7 +1,16 @@
+.button__tooltipContainer {
+    position: relative;
+    display: inline-block;
+    &:hover {
+      .button__tooltip {
+        opacity: 1;
+      }
+    }
+}
 .button__standard {
   gap: 0.75rem;
+  border: none;
   border-radius: 0.25rem;
-  border: 1px solid var(--color_border_button);
   color: var(--color_fg_on_button_subtle);
   font-variant-numeric: slashed-zero;
   font-feature-settings:
@@ -20,6 +29,12 @@
     cursor: not-allowed;
   }
 
+   &:hover {
+    background-color: var(--color_bg_layer);
+    border: 1px solid var(--color_border_default);
+    transition: all .2s ease-out;
+  }
+
   padding: 0 0.75rem;
   width: 5rem;
   height: 2rem;
@@ -46,6 +61,25 @@
   }
 }
 
+.button__tooltip {
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 4px 8px;
+    color: var(--color_fg_bold);
+    background-color: var(--color_bg_layer);
+    border: 1px solid var(--color_border_default);
+    border-radius: .5rem;
+    font-size: .75rem;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .2s ease-in-out;
+    box-shadow: 0 2px 4px rgba(0,0,0,.1);
+    z-index: 1000;
+}
+
 .button__icon {
   gap: 0.75rem;
   border-radius: 0.25rem;
@@ -72,10 +106,9 @@
   }
 
   &:hover {
-    background-color: var(--color_bg_layer_alternate-bold);
-    svg {
-      stroke: var(--color_fg_selected);
-    }
+    background-color: var(--color_bg_layer);
+    border: 1px solid var(--color_border_default);
+    transition: all .2s ease-out;
   }
 
   &:focus-visible {