feat(components): add TooltipButton component

- A reusable button with tooltip functionality
- Supports customizable delay, tooltip content, and className
- Uses shadcn/ui Tooltip and Button components
This commit is contained in:
cfngc4594 2025-05-07 13:32:26 +08:00
parent 2e19c08e8b
commit 6c9351ccd2

View File

@ -0,0 +1,47 @@
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { Button, ButtonProps } from "@/components/ui/button";
interface TooltipButtonProps extends ButtonProps {
children: React.ReactNode;
delayDuration?: number;
tooltipContent: string;
className?: string;
}
const TooltipButton = ({
children,
delayDuration = 0,
tooltipContent,
className,
...props
}: TooltipButtonProps) => {
return (
<TooltipProvider delayDuration={delayDuration}>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
className={cn(
"h-6 w-6 px-1.5 py-0.5 border-none shadow-none hover:bg-muted",
className
)}
{...props}
>
{children}
</Button>
</TooltipTrigger>
<TooltipContent className="px-2 py-1 text-xs">
{tooltipContent}
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};
export { TooltipButton };