tooltip is working here

src/components/features/ToolbarButton.tsx

@@ -6,6 +6,8 @@ import {
 } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/pro-solid-svg-icons";
 
+import { Tooltip } from "~/components/ui";
+
 export interface ToolbarButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean;
@@ -13,11 +15,13 @@ export interface ToolbarButtonProps
 
 export const ToolbarButton = ({
   icon,
+  tooltip,
   onClick,
   buttonProps = {},
   iconProps,
 }: {
   icon: IconDefinition;
+  tooltip?: string;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   buttonProps?: ToolbarButtonProps;
   iconProps?: Omit<FontAwesomeIconProps, "icon">;
@@ -35,7 +39,8 @@ export const ToolbarButton = ({
     active && "pointer-events-none text-primary ",
     customButtonClassNames,
   );
-  return (
+
+  const Button = (
     <button
       className={mergedButtonClasses}
       disabled={disabled}
@@ -45,4 +50,8 @@ export const ToolbarButton = ({
       <FontAwesomeIcon icon={icon} {...iconProps} />
     </button>
   );
+  if (tooltip) {
+    return <Tooltip tip={tooltip}>{Button}</Tooltip>;
+  }
+  return Button;
 };

src/components/features/ToolbarImage/data.ts

@@ -12,25 +12,31 @@ export const ToolbarImageButtonData = [
   {
     name: ToolbarImageButtonNames.MOVE,
     icon: faArrowsUpDownLeftRight,
+    tooltip: "Move",
   },
   {
     name: ToolbarImageButtonNames.ROTATE,
     icon: faArrowsRotate,
+    tooltip: "Rotate",
   },
   {
     name: ToolbarImageButtonNames.AI_STYLIZE,
     icon: faHatWitch,
+    tooltip: "AI Stylize",
   },
   {
     name: ToolbarImageButtonNames.MOVE_LAYER_UP,
     icon: faArrowUpFromLine,
+    tooltip: "Move Layer Up",
   },
   {
     name: ToolbarImageButtonNames.MOVE_LAYER_DOWN,
     icon: faArrowDownFromLine,
+    tooltip: "Move Layer Down",
   },
   {
     name: ToolbarImageButtonNames.DELETE,
     icon: faTrashCan,
+    tooltip: "Delete",
   },
 ];

src/components/features/ToolbarImage/index.tsx

@@ -35,6 +35,7 @@ export const ToolbarImage = ({ disabled, buttonsProps }: ToolbarImageProps) => {
         return (
           <ToolbarButton
             icon={buttonDatum.icon}
+            tooltip={buttonDatum.tooltip}
             key={idx}
             buttonProps={buttonProps}
           />

src/components/ui/Tooltip.tsx

@@ -0,0 +1,28 @@
+import { cloneElement, ReactElement, JSXElementConstructor } from "react";
+import { twMerge } from "tailwind-merge";
+
+export const Tooltip = ({
+  tip,
+  children,
+}: {
+  tip: string;
+  children: ReactElement<any, string | JSXElementConstructor<any>>;
+}) => {
+  const clonedChildren = cloneElement(children, {
+    tooltip: tip,
+    className: twMerge(
+      "before:w-0 before:h-0 before:absolute",
+      "before:left-1/2 before:bottom-full before:mb-[1px] before:-translate-x-1/2 before:z-50",
+      "before:border-l-8 before:border-l-transparent",
+      "before:border-r-8 before:border-r-transparent",
+      "before:border-t-8 before:border-t-white",
+      "after:absolute after:left-1/2 after:bottom-full after:-translate-x-1/2 after:z-40 ",
+      "after:content-[attr(tooltip)] after:text-black after:text-nowrap",
+      "after:rounded-xl after:border after:border-ui-border after:bg-ui-panel after:px-2 after:py-1 after:mb-2 after:shadow-xl",
+      "after:hidden before:hidden hover:after:block hover:before:block",
+      "relative",
+      children.props.className,
+    ),
+  });
+  return clonedChildren;
+};

src/components/ui/index.ts

@@ -5,3 +5,4 @@ export * from "./LoadingSpinner";
 export * from "./PanelBottom";
 export * from "./PanelRight";
 export * from "./Spinner";
+export * from "./Tooltip";