Tooltip

import { Tooltip } from "@/components/ui/tooltip";

export default function Example() {
  return <Tooltip />;
}

"use client";

import { forwardRef, useState } from "react";
import { cn } from "@/lib/utils";

const Tooltip = forwardRef(({ className, content, side = "top", children, ...props }, ref) => {
  const [show, setShow] = useState(false);

  return (
    <div ref={ref} className={cn("relative inline-flex", className)}
      onMouseEnter={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
      {...props}
    >
      {children}
      {show && (
        <div className={cn("absolute z-50 whitespace-nowrap rounded-md bg-foreground px-3 py-1.5 text-xs text-background shadow-md animate-in fade-in-0",
          side === "top" && "bottom-full left-1/2 mb-2 -translate-x-1/2",
          side === "bottom" && "left-1/2 top-full mt-2 -translate-x-1/2",
          side === "left" && "right-full top-1/2 mr-2 -translate-y-1/2",
          side === "right" && "left-full top-1/2 ml-2 -translate-y-1/2"
        )}>
          {content}
        </div>
      )}
    </div>
  );
});
Tooltip.displayName = "Tooltip";

export { Tooltip };